什么是CSP？
CSP (Content Security Policy)，即内容安全政策，是一种 Web 应用程序安全规范，它可以帮助开发者减少 XSS、CSRF 等 Web 安全攻击。
CSP 通过配置资源加载规则来限制浏览器对于不同类型的资源请求，从而减小被 XSS 攻击窃取数据等风险，也可以禁止 inline 脚本、CSS 等。CSP 可以在服务器端发送 HTTP 头部来实现。
CSP 中的“安全策略”指定了在 Web 应用程序中可加载哪些资源。 资源包括JavaScript、CSS、字体、图片等等。您可以为不同类型的资源指定策略，因此您可以严格限制应用程序中的资源加载，以减轻安全漏洞的风险。。
例如，一个 CSP 代码将策略设置为只允许加载站点内部样式表，不允许内联脚本或内容，以及不允许从 non-self 资源加载呈现引擎（例如图片）等。又如，下面的 CSP 代码：
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline';
该策略摒弃了内联脚本的使用，而只允许加载同域的脚本，可以防止 XSS 攻击。
无障碍添加
综合多个月的研发，目前智能无障碍添加代码看来已经基本成熟，不但已经通过了历史上的许多标样测试（比如 ONO-WG等），而且客户从美洲开始已经开始使用无障碍添加。
在前端实现中，我们可以使用 Web 和可访问性（WebA）技术来为无障碍用户提供更佳的体验。Web 应用程序的所有主要框架和库都支持 WebA 技术。
通过以下流程来完善无障碍添加：
1. 设置 HTML 标题和文本描述
- 对于文档的每部分使用正确的语义标签（H1～H6 标题，段落，列表）
- 将图像的文本说明（alt属性）视为该图像的有用信息
- 在链接标题中使用具有描述性内容，而不是带有“单击此处”或其他不明确的短语的链接。
示例代码：
-- -------------------- ---- ------- ------------------------ ------- ----- --- - ---------- ------------------------------------- ---- ------ ---------------------------------------- ------ --------------------------------------- ------ -------------------------------------- ----- ---- ----------------- ----------------展开代码
2. 设置键盘焦点
- 使用 tabindex 属性将非链接元素引导到页面
- 使用自定义 JavaScript 代码来执行需要捕获和响应键盘事件的操作。它可能涉及到键盘快捷键，使用焦点行为更改特定元素/区域的状态，或者启用用户定义的特殊键盘命令，以便更轻松地控制 Web 应用程序。
示例代码：
-- -------------------- ---- ------- ------ ------ --------------------------- ------ ----------- ------------- ------------- ------ -------------------------- ------ --------------- ------------- ------------- ------ ------------- ------------ ----------- ------- -------- -------------------------------------------- ---------展开代码
3. 设置适当的视觉效果
- 引导无障碍用户的方向和注意点，使用适当的颜色和样式来突出信息
- 使用 ARIA 属性定义呈现上下文中元素的作用和状态。
- 做一个可缩放页面 Layout，使页面上的元素可以在不损失界面的情况下增大或缩小
示例代码：
-- -------------------- ---- ------- ------- ------------- ------------------------------- ----- ----------------- ------------------ -- --------------- -- ------------------- -- ------------------------ ------- ------- ------------ - ----------------- ------- - -------- -------- ----------------------------------------------------------------- ---------展开代码
4. 保证语言可访问性
- 为所有页面元素添加适当的语言代码，以便屏幕阅读器和其他辅助技术程序能够识别和正确发音
- 使用正确的字体和样式来使文本易于阅读。
- 支持多个语言，通过HTTP头控制 HTML 和语言不同的版本路径指向达到针对语言倾向用户进行无障碍化。
示例代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ --------- ---- ------------ ----- --------------- ---------------------------- ----------------- ----- ---------------- ----------------- ------- -------------------------- ------- ------ --- ------- -------展开代码
总之，通过上述四个步骤，您可以为需要有障碍用户访问您的网站或应用程序的用户提供更好的体验。使用 Web 与可访问性（WebA）技术是前端开发的一项核心任务。只有在考虑无障碍性时，我们才能建立真正面向用户和可持续的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca8674e46428fe9e2c6a94
