如何允许网页安全地修改用户的 svg 文件?
How to allow webpage to modify user's svg file, safely?
我有一个页面 + javascript 将用户 SVG 文件读入 HTML <对象> 的数据,然后使用 [=51= 修改 SVG 的 DOM ].
编辑:用户使用文件类型的输入字段从他们自己的文件系统中选择一个文件。
这一切在 firefox 中运行良好,但 edge 和 chrome 都拒绝引用单一来源策略(据我了解,chrome 吐出
Blocked a frame with origin "null" from accessing a cross-origin frame.
而 edge 只是拒绝读取对象数据)。
如果我足够了解单一来源政策以及所涉及的风险,edge 和 chrome 拒绝使用加载的 SVG 是 合法的。首先,我错了吗?
其次,我该如何解决这个问题?有办法吗?让用户将 SVG 上传到服务器然后加载它(以便它与我的页面共享原点)是否可行 - 如果是这样,这安全吗?
我正在寻找 "proper" 方法来做到这一点:对我的网站安全,对用户安全等。
谢谢
类似问题:
- Modify object data at runtime in Chrome without SOP - 未回答
- How to access id's of externally loaded svg file? - 没有有效答案
- Circumventing Chrome Access-control-allow-origin on the local file system? - 对于在本地主机上提供的页面
如果我应该对这些问题做点什么而不是再问一次,我深表歉意。我希望通过更多最新技术可以找到解决方案。
直接在 HTML 中使用 <svg>
并将文件放在那里。
因为用户上传自己的文件,应该没有风险。
您仍然应该验证 svg 文件是否确实是一个有效的 svg 文件,里面没有 onload,<script>
等。可以在不执行 svg 的情况下验证它。使用白名单策略并在使用 innerHTML
之前执行此操作。 (因为用户可能已经收到来自攻击者的每条消息的恶意 svg 文件)。永远不要相信用户输入。
我有一个页面 + javascript 将用户 SVG 文件读入 HTML <对象> 的数据,然后使用 [=51= 修改 SVG 的 DOM ].
编辑:用户使用文件类型的输入字段从他们自己的文件系统中选择一个文件。
这一切在 firefox 中运行良好,但 edge 和 chrome 都拒绝引用单一来源策略(据我了解,chrome 吐出
Blocked a frame with origin "null" from accessing a cross-origin frame.
而 edge 只是拒绝读取对象数据)。
如果我足够了解单一来源政策以及所涉及的风险,edge 和 chrome 拒绝使用加载的 SVG 是 合法的。首先,我错了吗?
其次,我该如何解决这个问题?有办法吗?让用户将 SVG 上传到服务器然后加载它(以便它与我的页面共享原点)是否可行 - 如果是这样,这安全吗?
我正在寻找 "proper" 方法来做到这一点:对我的网站安全,对用户安全等。
谢谢
类似问题:
- Modify object data at runtime in Chrome without SOP - 未回答
- How to access id's of externally loaded svg file? - 没有有效答案
- Circumventing Chrome Access-control-allow-origin on the local file system? - 对于在本地主机上提供的页面
如果我应该对这些问题做点什么而不是再问一次,我深表歉意。我希望通过更多最新技术可以找到解决方案。
直接在 HTML 中使用 <svg>
并将文件放在那里。
因为用户上传自己的文件,应该没有风险。
您仍然应该验证 svg 文件是否确实是一个有效的 svg 文件,里面没有 onload,<script>
等。可以在不执行 svg 的情况下验证它。使用白名单策略并在使用 innerHTML
之前执行此操作。 (因为用户可能已经收到来自攻击者的每条消息的恶意 svg 文件)。永远不要相信用户输入。