الـ Content Security Policy و SRI

شغّل الـ widget تحت CSP صارمة، وثبّت ملف الـ CDN بـ Subresource Integrity (SRI).

في الصفحة دي

الـ widget مش محتاج unsafe-inline ولا unsafe-eval.

Content Security Policy

بيضيف اتنين style tags، فمرّر الـ nonce بتاعهم، والمؤشر الكبير صورة SVG بصيغة data:. شيل الـ CDN host لو إنت بتعمل bundle للـ package بنفسك. الـ CI بيشغّل الـ widget تحت default-src 'none' مع Trusted Types وبيفشل عند أي violation.

Terminal

Content-Security-Policy: script-src 'self' https://cdn.jsdelivr.net;
  style-src 'self' 'nonce-RANDOM'; img-src 'self' data:; require-trusted-types-for 'script'

TypeScript

A11yWidget.init({ nonce: "RANDOM" }); // the same per-response nonce as in the header

Subresource Integrity

الـ @1 على الـ CDN بيمشي ورا كل إصدارات 1.x، فمينفعش يكون ليه integrity hash. في الـ production، ثبّت version محددة مع الـ hash بتاعها: المتصفح هيرفض الملف لو الـ CDN قدّم حاجة تانية في يوم من الأيام. احسب الـ hash بنفسك أو انسخه من صفحة الملف على jsdelivr.com، وحدّث الاتنين لما تعمل upgrade.

HTML

<script src="https://cdn.jsdelivr.net/npm/open-accessibility-widget@1.4.1/dist/open-accessibility-widget.global.js"
        integrity="sha384-dO9rT4vwimvvXQt0APugeYB/UVAs+WxY4DskABQA/kETXVreihc0vfYY0S0lSW9G" crossorigin="anonymous"></script>

Terminal

curl -s https://cdn.jsdelivr.net/npm/open-accessibility-widget@<version>/dist/open-accessibility-widget.global.js \
  | openssl dgst -sha384 -binary | openssl base64 -A

Trusted Types

الـ widget بيبني الـ interface بتاعه بـ createElement وعمره ما بيحط HTML strings، فبيشتغل تحت require-trusted-types-for 'script' من غير أي policy خاصة بيه.

عدّل الصفحة دي على GitHub