urlpattern polyfill

urlpattern polyfills

Urlpattern เป็นเว็บ API ใหม่สำหรับการจับคู่ URL มันตั้งใจที่จะให้ API ที่สะดวกสำหรับนักพัฒนาเว็บและสามารถใช้งานได้ในเว็บ API อื่น ๆ ที่จำเป็นต้องจับคู่ URL เช่นพนักงานบริการ ผู้อธิบายกล่าวถึงกรณีการใช้งานที่สร้างแรงบันดาลใจ

นี่คือ polyfill สำหรับ URLPATTERN API เพื่อให้คุณลักษณะมีอยู่ในเบราว์เซอร์ที่ไม่รองรับมัน โพลีฟิลนี้ผ่านชุดทดสอบแพลตฟอร์มเว็บเดียวกัน

วิธีโหลดโพลีฟิลด์

Polyfill ทำงานในเบราว์เซอร์ (โมดูล ESM) และใน node.js ไม่ว่าจะผ่านการนำเข้า (โมดูล ESM) หรือผ่านต้องการ (โมดูล CJS)

polyfill จะถูกโหลดเฉพาะในกรณีที่ urlpattern ไม่มีอยู่ในวัตถุทั่วโลกและในกรณีนั้นมันจะเพิ่มลงในวัตถุทั่วโลก

กำลังโหลดเป็นโมดูล ESM

 // Conditional ESM module loading (Node.js and browser)
// @ts-ignore: Property 'UrlPattern' does not exist 
if ( ! globalThis . URLPattern ) { 
  await import ( "urlpattern-polyfill" ) ;
}
/** 
 * The above is the recommended way to load the ESM module, as it only
 * loads it on demand, thus when not natively supported by the runtime or
 * already polyfilled.
 */
import "urlpattern-polyfill" ;

/** 
 * In case you want to replace an existing implementation with the polyfill:
 */
import { URLPattern } from "urlpattern-polyfill" ;
globalThis . URLPattern = URLPattern 

บันทึก:

// @ts-ignore: Property 'UrlPattern' does not exist ในบางสภาพแวดล้อมเพราะก่อนที่คุณจะโหลดโพลีฟิลมันอาจไม่สามารถใช้งานได้ ความคิดทั้งหมดคือมันโหลดเมื่อมันไม่ได้อยู่ที่นั่น

กำลังโหลดเป็นโมดูล CommonJS

 // Conditional CJS module loading (Node.js)
if ( ! globalThis . URLPattern ) {
   require ( "urlpattern-polyfill" ) ;
}
/** 
 * The above is the recommended way to load the CommonJs module, as it only
 * loads it on demand, thus when not natively supported by the runtime or
 * already polyfilled.
 */
require ( "urlpattern-polyfill" ) ;

/** 
 * In case you want to replace an existing implementation with the polyfill:
 */
const { URLPattern } = require ( "urlpattern-polyfill" ) ; ;
globalThis . URLPattern = URLPattern 

บันทึก:

ไม่ว่าคุณจะโหลด polyfill อย่างไรเมื่อไม่มีการใช้งานในสภาพแวดล้อมของคุณมันจะเพิ่มลงในวัตถุระดับโลก เสมอ

ตัวอย่างพื้นฐาน

 let p = new URLPattern ( { pathname : '/foo/:name' } ) ;

let r = p . exec ( 'https://example.com/foo/bar' ) ;
console . log ( r . pathname . input ) ; // "/foo/bar"
console . log ( r . pathname . groups . name ) ; // "bar"

let r2 = p . exec ( { pathname : '/foo/baz' } ) ;
console . log ( r2 . pathname . groups . name ) ; // "baz" 

ตัวอย่างการจับคู่คำขอ JPG หรือ PNG ที่มาจากต้นกำเนิดเดียวกัน

 // Match same-origin jpg or png URLs.
// Note: This uses a named group to make it easier to access
//       the result later.
const p = new URLPattern ( {
  pathname : '/*.:filetype(jpg|png)' ,
  baseURL : self . location
} ) ;

for ( let url in url_list ) {
  const r = p . exec ( url ) ;

  // skip non-matches
  if ( ! r ) {
    continue ;
  }

  if ( r . pathname . groups [ 'filetype' ] === 'jpg' ) {
    // process jpg
  } else if ( r . pathname . groups [ 'filetype' ] === 'png' ) {
    // process png
  }
}

รูปแบบในกรณีนี้สามารถทำให้ง่ายขึ้นโดยไม่ต้องตรวจสอบจุดกำเนิดโดยออกจาก baseUrl

 // Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; 

ตัวอย่างของการสนับสนุนแบบฟอร์มสั้น

เรากำลังวางแผนที่จะสนับสนุน "รูปแบบสั้น" สำหรับการเริ่มต้นวัตถุ urlpattern สิ่งนี้ได้รับการสนับสนุนโดย polyfill แต่ยังไม่ได้ใช้โดยการใช้โครเมียม

ตัวอย่างเช่น:

 const p = new URLPattern ( "https://*.example.com/foo/*" ) ;

หรือ:

 const p = new URLPattern ( "foo/*" , self . location ) ;

การอ้างอิง API

ภาพรวม API ที่มีคำอธิบายประกอบประเภท typescript อยู่ด้านล่าง Web IDL ที่เกี่ยวข้องสามารถพบได้ที่นี่

 type URLPatternInput = URLPatternInit | string ;

class URLPattern {
  constructor ( init ?: URLPatternInput , baseURL ?: string ) ;

  test ( input ?: URLPatternInput , baseURL ?: string ) : boolean ;

  exec ( input ?: URLPatternInput , baseURL ?: string ) : URLPatternResult | null ;

  readonly protocol : string ;
  readonly username : string ;
  readonly password : string ;
  readonly hostname : string ;
  readonly port : string ;
  readonly pathname : string ;
  readonly search : string ;
  readonly hash : string ;
}

interface URLPatternInit {
  baseURL ?: string ;
  username ?: string ;
  password ?: string ;
  protocol ?: string ;
  hostname ?: string ;
  port ?: string ;
  pathname ?: string ;
  search ?: string ;
  hash ?: string ;
}

interface URLPatternResult {
  inputs : [ URLPatternInput ] ;
  protocol : URLPatternComponentResult ;
  username : URLPatternComponentResult ;
  password : URLPatternComponentResult ;
  hostname : URLPatternComponentResult ;
  port : URLPatternComponentResult ;
  pathname : URLPatternComponentResult ;
  search : URLPatternComponentResult ;
  hash : URLPatternComponentResult ;
}

interface URLPatternComponentResult {
  input : string ;
  groups : {
      [ key : string ] : string | undefined ;
  } ;
}

รูปแบบไวยากรณ์

รูปแบบไวยากรณ์ที่นี่ขึ้นอยู่กับสิ่งที่ใช้ในไลบรารีเส้นทางสู่ Regexp ยอดนิยม

• ความเข้าใจของ "ตัวหาร" ที่แยกส่วนของสตริง สำหรับชื่อพา ธ นี่คืออักขระ "/"
• กลุ่ม Regex ที่กำหนดโดยชุดวงเล็บที่แนบมา ภายในวงเล็บอาจมีการกำหนด regex ทั่วไป
• กลุ่มที่มีชื่อที่ตรงกับตัวละครจนกระทั่งตัวแบ่งถัดไป กลุ่มที่มีชื่อเริ่มต้นด้วยตัวละคร ":" แล้วชื่อ ตัวอย่างเช่น "/:foo/:bar" มีสองกลุ่มชื่อ
• regex ที่กำหนดเองสำหรับกลุ่มที่มีชื่อ ในกรณีนี้ชุดของวงเล็บที่มี regex ติดตามกลุ่มที่มีชื่อทันที เช่น "/:foo(.*)" จะแทนที่ค่าเริ่มต้นของการจับคู่กับตัวแบ่งถัดไป
• ตัวดัดแปลงอาจเลือกติดตาม Regex หรือกลุ่มชื่อ ตัวดัดแปลงคือ "?" , "*" หรือ "+" ฟังก์ชั่นเช่นเดียวกับที่พวกเขาทำในการแสดงออกปกติ เมื่อกลุ่มเป็นตัวเลือกหรือทำซ้ำและนำหน้าด้วยตัวแบ่งก่อนตัวหารก็เป็นทางเลือกหรือทำซ้ำ ตัวอย่างเช่น "/foo/:bar?" จะตรงกับ "/foo" , "/foo/" หรือ "/foo/baz" การหลบหนีตัวแบ่งจะทำให้จำเป็นแทน
• วิธีการจับคู่ตัวละครอย่างโลภแม้กระทั่งข้ามตัวแบ่งโดยใช้ "(.*)" (เรียกว่ากลุ่มที่ไม่มีชื่อ)

ขณะนี้เราวางแผนที่จะมีความแตกต่างที่รู้จักเหล่านี้กับ Path-to-regexp:

• ไม่สนับสนุนคำนำหน้าและคำต่อท้ายแบบกำหนดเอง

การทำให้เป็นที่ยอมรับ

URL มีรูปแบบที่เป็นที่ยอมรับซึ่งขึ้นอยู่กับ ASCII ซึ่งหมายความว่าชื่อโดเมนที่เป็นสากล (ชื่อโฮสต์) ยังมีการเป็นตัวแทนตาม Canonical ASCII และส่วนประกอบอื่น ๆ เช่น hash search และ pathname จะถูกเข้ารหัสโดยใช้การเข้ารหัสเปอร์เซ็นต์

ขณะนี้ URLPattern ไม่ได้ทำการเข้ารหัสหรือการทำให้เป็นมาตรฐานของรูปแบบ ดังนั้นนักพัฒนาจะต้องเข้ารหัสอักขระ Unicode ก่อนที่จะส่งรูปแบบไปยังตัวสร้าง ในทำนองเดียวกันตัวสร้างไม่ได้ทำสิ่งต่าง ๆ เช่นชื่อพา ธ การแบนเช่น /foo/../bar to /bar ปัจจุบันรูปแบบจะต้องเขียนไปยังเป้าหมาย URL Canonical URL ด้วยตนเอง

อย่างไรก็ตามมันดำเนินการเหล่านี้สำหรับ test() และ exec() อินพุต

การเข้ารหัสส่วนประกอบสามารถทำได้ด้วยตนเองอย่างง่ายดาย แต่อย่าเข้ารหัสไวยากรณ์รูปแบบ:

 encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" 

 new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"

ทำลายการเปลี่ยนแปลง

• v9.0.0 ลดลงรองรับ nodejs 14 และต่ำกว่า จำเป็นต้องใช้ nodejs 15 หรือสูงกว่า นี่เป็นเพราะการใช้ฟิลด์คลาสส่วนตัวดังนั้นเราจึงสามารถปรับให้เหมาะสมที่สุดได้ ไม่มี การเปลี่ยนแปลงในการใช้งาน แต่เราสามารถลดขนาดของโพลีฟิลได้โดย ~ 2.5KB (~ 13%) ด้วย PR #118 จาก @JimmyWarting

เรียนรู้เพิ่มเติม

• ผู้อธิบาย
• เอกสารออกแบบ

การรายงานปัญหาด้านความปลอดภัย

หากคุณมีข้อมูลเกี่ยวกับปัญหาด้านความปลอดภัยหรือช่องโหว่ด้วยโครงการโอเพ่นซอร์ส Intel-Mainted ใน https://github.com/intel โปรดส่งอีเมลไปที่ [email protected] เข้ารหัสข้อมูลที่ละเอียดอ่อนโดยใช้คีย์สาธารณะ PGP ของเรา สำหรับปัญหาที่เกี่ยวข้องกับผลิตภัณฑ์ Intel กรุณาเยี่ยมชม https://security-center.intel.com