编辑“︁JavaScript权限管理”︁

= JavaScript权限管理 =

'''JavaScript权限管理'''是指通过技术手段控制JavaScript代码对系统资源（如浏览器API、用户数据、网络请求等）的访问权限，以防止恶意操作或意外泄露。它是Web安全的核心组成部分，尤其在多用户系统、第三方脚本集成和跨域应用中至关重要。

== 基本概念 ==

JavaScript运行在浏览器的'''沙箱环境'''中，其权限受限于浏览器的安全策略。常见的权限管理机制包括：

* '''同源策略（Same-Origin Policy）'''：限制脚本只能访问同协议、同域名、同端口的资源。
* '''内容安全策略（CSP）'''：通过HTTP头定义允许加载的资源来源。
* '''权限API（Permissions API）'''：允许网页查询和请求特定API（如摄像头、地理位置）的访问权限。

=== 权限模型示例 ===
<mermaid>
graph TD
    A[用户访问网页] --> B{是否请求权限?}
    B -->|是| C[浏览器弹出权限请求]
    B -->|否| D[默认拒绝访问]
    C --> E{用户是否授权?}
    E -->|是| F[执行受限操作]
    E -->|否| G[抛出SecurityError]
</mermaid>

== 关键技术与实现 ==

=== 1. 同源策略与跨域控制 ===
通过<code>XMLHttpRequest</code>或<code>fetch</code>发起跨域请求时，浏览器会先发送OPTIONS预检请求：

<syntaxhighlight lang="javascript">
// 跨域请求示例
fetch('https://api.example.com/data', {
    method: 'GET',
    mode: 'cors', // 必须显式声明跨域模式
    headers: {
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.catch(error => console.error('跨域错误:', error));
</syntaxhighlight>

'''输出结果：'''
* 若目标服务器返回正确的CORS头（如<code>Access-Control-Allow-Origin: *</code>），请求成功。
* 否则浏览器会阻止响应并抛出错误。

=== 2. 内容安全策略（CSP） ===
通过HTTP头或<meta>标签定义资源白名单：

<syntaxhighlight lang="html">
<!-- 只允许加载本站脚本和Google Analytics -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' https://www.google-analytics.com">
</syntaxhighlight>

=== 3. 权限API实践 ===
查询和请求地理位置权限的完整流程：

<syntaxhighlight lang="javascript">
// 检查权限状态
navigator.permissions.query({ name: 'geolocation' })
    .then(permissionStatus => {
        console.log(`当前权限状态: ${permissionStatus.state}`);
        
        permissionStatus.onchange = () => {
            console.log(`权限变更为: ${permissionStatus.state}`);
        };
    });

// 请求权限（实际调用API时触发）
navigator.geolocation.getCurrentPosition(
    position => console.log("位置获取成功:", position),
    error => console.error("错误:", error)
);
</syntaxhighlight>

== 实际应用案例 ==

=== 案例1：第三方支付集成 ===
当集成支付平台JS-SDK时，需严格限制权限：
* 通过CSP限制只加载指定域的支付脚本
* 使用沙箱iframe隔离支付表单
* 监听<code>postMessage</code>通信并验证来源

=== 案例2：浏览器扩展开发 ===
Chrome扩展的权限声明示例（manifest.json）：
<syntaxhighlight lang="json">
{
    "name": "安全扩展",
    "permissions": [
        "storage",
        "https://api.example.com/"
    ],
    "optional_permissions": ["geolocation"]
}
</syntaxhighlight>

== 高级主题 ==

=== 动态权限计算 ===
在需要精细控制的系统中，可采用基于属性的访问控制（ABAC）模型：

<math>
\text{决策} = 
\begin{cases} 
\text{允许} & \text{如果 } \sum_{i=1}^{n} (w_i \cdot attr_i) \geq \theta \\
\text{拒绝} & \text{否则}
\end{cases}
</math>

=== WebAssembly安全边界 ===
即使使用WebAssembly，仍受浏览器权限限制：
* 无法直接访问DOM
* 系统调用需通过JavaScript胶水代码
* 内存访问受限于ArrayBuffer权限

== 最佳实践 ==
* 最小权限原则：只请求必要的权限
* 定期审计第三方脚本
* 对敏感操作实施二次验证
* 使用<code>Feature-Policy</code>头限制特性（如摄像头、支付API）

== 常见问题 ==

'''Q：如何检测页面是否运行在iframe中？'''
<syntaxhighlight lang="javascript">
if (window.self !== window.top) {
    console.log("当前处于iframe环境");
}
</syntaxhighlight>

'''Q：Service Worker如何管理缓存权限？'''
通过<code>cache.addAll()</code>时会受到CSP限制，且需在install事件中显式声明。

== 延伸阅读 ==
* [[ECMAScript]]标准中的安全条款
* [[Web应用安全]]基础概念
* [[浏览器工作原理]]中的安全沙箱机制

通过系统化的权限管理，开发者能有效平衡功能需求与安全风险，构建更可靠的Web应用。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript安全]]