HashMap properties 自动化部署 xml awk download underscorejs vue注册组件 vue开发文档 管理后台框架 安卓项目实战 jquery触发点击事件 oracle一键卸载工具 teamviewer验证被拒绝 华为路由器ipv6配置 json转object mysql临时表 python中assert python基础语法 python测试 python包 python数字类型 java文件 java基础语言 java编程入门 java读取文件内容 java日期格式化 php实例教程 高等数学同济第七版 dep 华为ff 社区网格化管理平台 算法笔记 免费图片文字识别软件 python延时函数 globalscape onaccuracychanged igfxtray mysql数据库恢复 ipad清理内存
当前位置: 首页 > 学习教程  > 编程语言

特征策略 Feature Policy(iframe内功能控制)

2020/9/19 14:39:15 文章标签:

背景:最近在开发一些产品经常用到iframe这个古老的标签(由于公司许多产品都存在功能耦合),当被嵌入的站点使用到clipboard api的地方功能无效,还有用到camera microphone 相关api时,刷新后音视频的声音无法自动播放,等等嵌入式使用时的功能无效问题,原来问题的来源是feature policy策略。

概念

  • Web提供的功能和API如果被滥用,可能会带来隐私或安全风险。在某些情况下,您可能希望严格限制在网站上使用此类功能的方式。
  • 特征策略提供一种机制去声明哪些功能(web api)可以使用(或者不能使用),在顶级页面或iframe嵌入式框架中控制哪些(允许列表)可以使用哪些api,借此锁定功能,或限制第三方的内容。
  • 允许针对网站中的特定来源或框架启用/禁用功能。该功能在可用时与Permissions API或特定于功能的机制集成在一起,以检查该功能是否可用.

功能包括

  • 加速器

  • 环境光源感测器

  • 音视频自动播放

  • 摄像功能

  • 麦克风

  • 加密媒体信息

  • 全屏功能

  • 地理位置

  • 陀螺仪

  • 延迟加载

  • Midi

  • 支付请求

  • 画中画(Picture-in-picture)

  • 扬声器

  • USB

  • VR / XR

  • 通过JavaScript api(document.featurePolicy.allowedFeatures())可以枚举全部的功能:

    • [“geolocation”, “midi”, “camera”, “usb”, “autoplay”,…]
      在这里插入图片描述
  • 判断是否支持某功能

    • document.featurePolicy.allowsFeature(‘geolocation’);

示例

  • 改变第三方音视频自动播放的默认行为。
    • 默认情况下,Chrome允许在同源iframe中的视频上使用“自动播放”属性。但Safari就要看偏好设置里面如何设置了,如果设置了禁止自动播放,则需要用户交互(如点击)才能播放。
    • <iframe class="content-view" name="content-view" allow="autoplay 'none'" src="..."></iframe>
  • 地理位置
    • 默认情况下,Chrome会阻止跨域iframe使用地理定位。
    • <iframe src="..." allow="geolocation https://google-developers.appspot.com">
  • 限制网站使用敏感的api,比如摄像头和麦克风
  • 允许iframe使用全屏api(requestFullScreen)
    • <iframe src="..." allow="fullscreen">
    • iframe里可以通过调用 requestFullscreen() 方法激活全屏模式
    • allowfullscreen 属性是一个历史遗留属性,已经被重新定义为 allow=“fullscreen”
  • 阻止使用过时的api,比如 document.write()
  • 确保图像的大小正确,对于视口来说不会太大(浪费用户的带宽)
<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe src="https://another-example.com/demos/..."
        allow="geolocation https://another-example.com"></iframe>
        
<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'">

指定方式

  • 通过 HTTP 报文头上指定
  • 在 iframe 的 allow 属性上指定

HTTP标头和allow属性之间的主要区别在于allow属性仅控制iframe中的功能。标头控制响应中的功能以及页面内的任何嵌入式内容.

参考

  • Feature Policy:
    • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/%E7%AD%96%E7%95%A5%E7%89%B9%E5%BE%81
  • demo(部分示例而已):
    • https://feature-policy-demos.appspot.com/
  • 谷歌文档:https://developers.google.com/web/updates/2018/06/feature-policy
  • chrome源码,可查看全部的功能清单:https://source.chromium.org/chromium/chromium/src/+/master:third_party/blink/renderer/platform/feature_policy/feature_policy.cc;drc=ab90b51c5b60de15054a32b0bd18e4839536a1c9;l=138

本文链接: http://www.dtmao.cc/news_show_200129.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?