特性策略与权限策略详解:理解feature policy & Permissions-Policy 的真实含义
最编程
2024-07-23 18:44:13
...
特性策略(feature policy/Permissions-Policy)的简介
- 1. 什么是 特性策略(feature policy/Permissions-Policy)?(设置 对功能的权限)
- 2. 如何写 一个 feature policy(语法规则)?
- 3. 如何在使用中 设置特性策略(使用方法)?
- ⑴ HTTP header 的 Feature-Policy
- ⑵ iframe 中的 allow 属性
- 4. 嵌入内容的 策略的继承
- 5. 需要的显式禁用的特性(为了良好用户体验)
- ♣ 结束语 和 友情链接
-
快速搜索:涉及知识点比较多,看过之后忘了很正常,想查询时,请按
Ctrl+F
快速搜索关键字哦 (* ̄︶ ̄)。- 搜索后,多次按下 enter 键 ,或搜索框后的 上下箭头,就能在关键词之间快速跳转。
1. 什么是 特性策略(feature policy/Permissions-Policy)?(设置 对功能的权限)
- 在下方内容中,将 feature policy=特性策略=Permissions-Policy=权限策略=功能权限,视为一个意思。
- ⑴ 什么是 特性策略(feature policy)?
-
设置 功能权限: 我们为什么要使用特性策略?
- 因为,特性策略 允许开发人员 有选择地 启用、禁用和修改浏览器中 某些 ❶ 特性(功能)和 ❷ api 的行为。它类似于 内容安全策略,但控制特性(功能) 而不是安全行为。
- feature policy (美 /ˈfiːtʃər/, /ˈpɑːləsi/)提供了一种机制,在你的网站中 明确声明 使用了(或不使用)哪些功能。
- 如,可以根据 请求的来源(网址),定义了
<iframe>
可用的特性(功能)。- 如,是否 可访问麦克风、摄像头、电池、web 共享 API 等。
-
设置 功能权限: 我们为什么要使用特性策略?
- ⑵ feature policy 是如何工作的?
-
Feature Policy 允许你在*页面和嵌入的框架中 控制哪个源(网址)可以使用 哪个特性。
-
① 允许的 来源列表:
- 本质上,如果编写了一个策略,浏览器会如何处理?
- 浏览器将维护一个 启用 ❶ 每个特性的 ❷ 允许来源列表( allowlist) 。
- 如果没有为特性(功能)指定策略,怎么办?
- 那么将使用默认的 允许来源列表(allowlist)。
- 默认的 allowlist 是特定于 每个特性的。
- 本质上,如果编写了一个策略,浏览器会如何处理?
-
② 匹配才能用: 什么时候能用 某个特性(功能)?
- 对于 feature Policy 控制的每个特性,只有当其 发起请求的来源(网址) 与允许的来源列表相匹配时,该特性才在当前文档或框架中启用。
- 改名:在规范中
Feature-Policy header
现在被重命名为Permissions-Policy
。
-
- ⑴ 什么是 特性策略(feature policy)?
2. 如何写 一个 feature policy(语法规则)?
- ⑴ 一个策略 policy 由什么组成?
- 多个“策略指令(policy directives)”
-
一个 策略指令 的组成是什么?:
- 由 一个已定义的❶ 特性名 和一个允许使用该特性的 ❷ 来源列表(allowlist)的组合。
- 我们可以使用的特性名(policy-controlled features) 有哪些?
- 特性名列表: policy-controlled features
- 我们可以使用的特性名(policy-controlled features) 有哪些?
- 有多个 特性策略指令时 用什么分隔指令?
- 分号
;
分隔。
- 分号
- 一个策略指令的特性,有多个来源时,用 什么分隔来源?
- 空格
- 空格
- 特性名和 来源列表之间 用什么分隔?
- 也是用空格
- 也是用空格
-
分隔符的使用区别
- 分隔指令:分号
;
分隔。(指令之间) - 分隔来源 和 分隔“特性名与来源”:空格
- 分隔指令:分号
- 由 一个已定义的❶ 特性名 和一个允许使用该特性的 ❷ 来源列表(allowlist)的组合。
- ⑵ 来源列表(allowlist),可接受 多少个值?
- 它接受以下一个或多个值,即,一个特性(功能),可以有多个来源(空格分隔)。
- ① 文档内 所有源的嵌套网页:
*
- 表示该特性(功能) 在该文档下都是允许的,包括所有的嵌套网页(iframes),而不用管这些内容的来源,即,文档内嵌套的 所有来源网址都可以。
- ② 与文档 同源的嵌套网页:
self
- 表示该特性(功能)在该文档下都是允许的,并且仅在同源的情况下 嵌套网页(iframes)才可以使用这个功能。
- 什么是同源?
- 网址中的协议,主机(域名),端口,三者都完全一样。
- ③ 与 iframe 的 src 同源的嵌套网页:
src
- 该特性(功能)在 iframe 中是允许的,只要加载到其中的文档 与
iframe
的src
属性中的 URL 来自同一个来源。 - 关键字专用: 关键字
src
,在标签iframe
的allow
属性专用,为什么?- 因为一般跟嵌套网页相关的网址,就是在
iframe
的src
中设置的,也由 该标签的allow
来设置。 - 关键字
src
,是默认的 来源列表allowlist 值吗?- 是的。
- 因为一般跟嵌套网页相关的网址,就是在
- 该特性(功能)在 iframe 中是允许的,只要加载到其中的文档 与
- ④ 任何来源 都不允许使用:
none
- none,即没有来源列表,表示该特性在顶层 以及嵌套网页 都是被禁用的。
- ⑤ 允许 特定来源(网址):
<origin(s)>
- 表示该特性只在一些指定的源网址下 才允许使用,多个源网址 使用空格隔开。
- 什么是源网址?
- 仅包含 协议,主机(域名),端口(默认值可省略)的网址。如,
https://example.com
- 仅包含 协议,主机(域名),端口(默认值可省略)的网址。如,
-
⑶ 来源列表的关键字 的搭配使用
- ① 单独使用:值
*
(对所有源启用) 或 ‘none
’(对所有源禁用) 只能单独使用;为什么?- 因为他们针对的都是 全部,就不会有其他的可能值。
- ② 可搭配使用: 而’
self
’(与文档同源)和’src
’(与iframe
的src
同源)可以与一个或多个源的网址 一起使用。为什么?- 因为 满足条件的同源的网址,可能不止一个。
- ① 单独使用:值
-
⑷ 每个特性(feature) 都有默认的来源列表(allowlist)吗?
- 是的,一般是下列 3 个值的一个。
-
*
,'self'
,'none'
, - 具体哪一个是默认值,看满足了哪个 关键字的设定。
- 比如,当 文档和嵌入网页同源时,一般 默认值是
self
。
- 比如,当 文档和嵌入网页同源时,一般 默认值是
3. 如何在使用中 设置特性策略(使用方法)?
- Feature Policy 提供了两种方法 来指定控制特性的策略,哪两种?
- ① 在 HTTP header 的 Feature-Policy 中设置;
- ② 在
<iframe>
的allow
属性中设置。 - 两种方法的区别是: 作用范围 不同
- HTTP header 中的特性策略:控制 响应(服务器到客户端)中和页面内的任何嵌入内容。
-
allow
属性: 只控制<iframe>
中的特性(feature),范围缩小了。
-
⑴ HTTP header 的 Feature-Policy
- 如何发送 带有
Feature-Policy
HTTP header的页面响应?-
Feature-Policy
HTTP header的值,是浏览器对 给定页面 强制执行的一个策略。-
Feature-Policy
可以在响应(服务器到客户端)中使用,以传达应该由客户端强制执行的权限策略。
-
-
- 策略的结构什么?
Feature-Policy: <feature name> <allowlist of origin(s)>
- 如何发送 带有
-
示例1: 如何 阻止所有内容 使用地理位置API(Geolocation API)?
Feature-Policy: geolocation 'none'
-
示例2: 如何发送多条 策略指令?
- 方法1: 在 1个
Feature-Policy
中设置多个指令,指令之间,分号;
分隔指令; - 方法2: 设置多个
Feature-Policy
,每个里面一条 策略指令。 - 区别:两种方式的效果,是等价的,第一种方法更省时间点。
- 方法1: 在 1个
Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com;camera *;
Feature-Policy:unsized-media 'none'
Feature-Policy:geolocation 'self' https://example.com
Feature-Policy:camera *
-
⑵ iframe 中的 allow 属性
- 如何 设置
<iframe>
中的嵌入网页的 特性策略(功能权限)?- 使用
<iframe>
中的allow
功能权限 属性。
- 使用
- 如何 设置
-
示例1: 如何 允许这个
iframe
中的所有浏览环境 使用全屏?- 属性值为 全屏:
allow="fullscreen"
- 属性值为 全屏:
<iframe src="https://example.com..." allow="fullscreen"></iframe>
-
示例2:
<iframe>
的默认 来源列表 allowlist 值是什么?等价于什么?- 默认来源: ‘
src
’,所以上个例子中的全屏,等价于-
allow="fullscreen"
=allow="fullscreen 'src'"
=allow="fullscreen src"
(关键字src
是默认值,可被省略)- 关键字
src,none
等 可以带单引号,也可以不带,都是符合规则的,不会报错。 - 其中,fullscreen 是特性名, src 是来源列表。
- 关键字
- 为什么
src
可以被省略?- 特性名和来源列表,两者组合 构成一个完成的策略指令,因为来源列表有默认值,所以,有时候会被省略。
-
- 默认来源: ‘
<iframe src="https://example.com..." allow="fullscreen 'src'"></iframe>
-
注意:
allow="fullscreen"
和 “allowfullscreen
”属性不能同时使用,为什么?- “
allowfullscreen
” iframe 标签的 属性 控制对requestFullscreen()
的访问。- 如果 iframe 元素有一个“
allow
”属性,该属性的值有“fullscreen
”,那么“allowfullscreen
”属性必须不起作用。 -
会添加一个 允许所有源
*
:否则,iframe上“allowfullscreen
”属性的存在 将导致在构造 iframe 元素的嵌套浏览环境的容器策略时,为“fullscreen
”特性添加一个*
的来源 allowlist。
- 如果 iframe 元素有一个“
- “
-
示例3: 如何 允许 指定来源的
<iframe>
的内容 访问用户的位置?- 如何设置指定来源?
- 来源列表 是一个或多个指定的网址时,这些网址 就是指定的允许来源。
- 多个来源之间,用什么分隔? 用 空格
- 如何设置指定来源?
<iframe src="https://google-developers.appspot.com/demos/..."
allow="geolocation https://google-developers.appspot.com"></iframe>
-
示例4: 如何在 一个
<iframe>
标签中 设置多个 策略指令?比如,如何一次性 禁止<iframe>
使用摄像机和麦克风?- 都在 1个
allow
属性中设置,指令之间 用 分号;
分隔指令。
- 都在 1个
<iframe src="" allow="camera none;microphone none"></iframe>
<iframe allow="camera 'none'; microphone 'none'">
4. 嵌入内容的 策略的继承
- ⑴ 脚本 继承 谁的策略?
- 脚本继承 ❶ 其浏览环境(browsing context)的策略,而 ❷ 不考虑其来源。
- 那么,顶层脚本 是从哪里继承?
- 顶层脚本的浏览环境是顶层窗口 ,所以,顶层脚本从 主文档 继承策略。
- 那么,顶层脚本 是从哪里继承?
- 脚本继承 ❶ 其浏览环境(browsing context)的策略,而 ❷ 不考虑其来源。
- ⑵
<iframe>
继承谁的策略?- ① 所有
iframe
都继承其 父页面的策略。 - ② 如果
iframe
有一个allow
属性,使用什么策略?- 那么 将使用 父页面的策略 和
allow
属性 的组合。 - 即,如果要使
iframe
启用某个特性,源网址 必须 同时在父页面和 allow 属性的 来源列表allowlist 中。
- 那么 将使用 父页面的策略 和
- ③ 父框架禁用的特性,子框架和它的后代 能启用吗?
- 不能。禁用策略中的特性 是单向切换,父控制子,子不能控制父。
- 如果一个特性被父框架禁用了,子框架就不能重新启用它,子框架的任何后代 也不能。
- ① 所有
5. 需要的显式禁用的特性(为了良好用户体验)
-
为了良好的用户体验,完成最佳实践(best practices),要显式禁用哪些策略?
- 禁用如下所示的 指定策略,在发送 的 ❶ HTTP Header 或 ❷
<iframe>
的allow
属性中显式禁用一些功能: 为什么?- ① 因为这些功能是,可能对用户体验 产生负面影响的功能。
- ❶ 含布局的动画 Layout-inducing Animations:
layout-animations 'none'
- ❷ 未优化(压缩差)的图像 Unoptimized (poorly compressed) images:
unoptimized-images 'none'
- ❸ 超大号的图片 Oversized images:
oversized-images 'none'
- ❹ 同步脚本 Synchronous scripts:
sync-script 'none'
- ❺ 同步XMLHttpRequest Synchronous XMLHttpRequest:
sync-xhr 'none'
- ❻ 未确定大小的媒体 Unsized media:
unsized-media 'none'
- ❶ 含布局的动画 Layout-inducing Animations:
- ② 显式禁用 不好的功能: 为了避免破坏现有的网页内容,这些策略控制特性的默认设置是: 允许所有源使用这些功能。
- 也就是说,每个特性的默认allowlist是’
*
'。防止使用次优功能 需要显式地指定禁用特性的策略。
- 也就是说,每个特性的默认allowlist是’
- ① 因为这些功能是,可能对用户体验 产生负面影响的功能。
- 禁用如下所示的 指定策略,在发送 的 ❶ HTTP Header 或 ❷
-
示例1: 在 HTTP header 中的显式禁用
Feature-Policy: layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';
-
示例2: 在
<iframe>
的allow
属性中的显式禁用
<iframe src="https://example.com..." allow="layout-animations 'none'; unoptimized-images 'none'; oversized-images 'none'; sync-script 'none'; sync-xhr 'none'; unsized-media 'none';"></iframe>
♣ 结束语 和 友情链接
-
参考文档
- Using Feature Policy - HTTP | MDN
- Permissions Policy 规范文档
- 特性名列表: policy-controlled features
- 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
- 喜欢请收藏:喜欢本文 可收藏哦,方便快捷,会持续进行 ❶ 知识点更新 及 ❷ 修正错误。
- 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢小可爱们 ~╮( ̄▽ ̄)╭
-
转载 请评论告知作者 并注明出处 ,Thanks♪(・ω・)ノ
- 作者:Hey_Coder
- 来源:****
- 原文:https://blog.****.net/VickyTsai/article/details/124918381
- 版权声明:本文为博主原创文章,转载请附上博文链接!