Leaflet滑动菜单插件在严格Content Security Policy(CSP)下的报错修复咨询

DevOps 小满

2026-10-4

该冲突由严格CSP规则禁止直接向innerHTML属性赋值字符串导致，可根据你的实际场景选择以下修复方案：

场景1：CSP开启了Trusted Types规则，控制台报错包含Trusted Type相关提示
直接修改插件的setContents方法，新增TrustedHTML转换逻辑即可兼容，修改后的代码如下：

setContents: function(innerHTML){ 
  this._innerHTML = innerHTML; 
  // 兼容Trusted Types规则
  if (window.trustedTypes && trustedTypes.createPolicy) {
    const menuPolicy = trustedTypes.createPolicy('leafletSlideMenuPolicy', {
      createHTML: (inputStr) => inputStr
    });
    this._contents.innerHTML = menuPolicy.createHTML(this._innerHTML);
    return;
  }
  this._contents.innerHTML = this._innerHTML;
},

该方案不会改动插件原有功能，同时兼容Trusted Types开启和关闭的环境，不需要修改CSP规则。

场景2：报错提示unsafe-inline相关，说明传入的HTML内容包含行内脚本、行内事件绑定（如onclick="xxx"）这类被CSP禁止的内容
建议改写插件逻辑，用原生DOM API拼接节点代替直接插入HTML字符串，修改后的setContents参考代码如下：
```
setContents: function(content){ 
  // 先清空原有内容
  this._contents.replaceChildren();
  // 支持传入DOM节点或纯文本
  if (content instanceof Node) {
    this._contents.appendChild(content);
  } else {
    this._contents.textContent = String(content);
  }
},
```
你需要同步将原来传入setContents的HTML字符串，改为用document.createElement构造的DOM节点，所有事件绑定改用addEventListener实现，完全避免行内不安全内容。
无侵入兼容方案
如果你不想直接修改插件源码，可以在初始化slide menu之前，重写插件原型上的setContents方法，后续插件版本更新也不会被覆盖。