此类HTML追加式JS代码是否存在安全漏洞？能否被永久篡改网站？

1. 用户能否修改html变量造成网站内容永久更改？ #

• 答案是不能造成永久性更改。前端JS代码在用户本地浏览器运行，用户确实可以通过浏览器开发者工具修改自己浏览器里的html变量，甚至改写loadingMessage函数逻辑，但这类修改仅在当前浏览器会话内有效——刷新页面、关闭浏览器后，所有改动都会消失，既不会影响服务器上的原始代码，也不会让其他访问网站的用户看到修改后的内容。
• 网站的永久内容存储在服务器端，只有服务器端的代码或数据变更才会导致网站内容永久改变，前端本地的修改无法触达服务器。

2. 这段代码是否存在被攻击的风险？ #

风险与否完全取决于html变量的内容来源：

• 如果html是硬编码的固定内容（比如const html = '<div class="loading">加载中...</div>'）：完全没有攻击风险，因为内容是你预先写死的，不存在不可信内容注入的可能。
• 如果html包含用户输入、第三方接口返回或其他不可信数据源的内容：存在**XSS（跨站脚本攻击）**风险。比如攻击者输入包含<script>document.cookie='xxx'</script>的内容，直接拼接HTML插入页面后，脚本会被浏览器执行，可能窃取当前用户的登录凭证、伪造用户操作，甚至篡改页面显示内容（虽仅影响当前用户，但危害依然存在）。

新手安全建议 #

• 避免直接用拼接HTML的方式插入动态内容，优先使用document.createElement创建元素，再用textContent设置文本内容（文本内容会自动被浏览器转义，不会被解析为HTML）。
• 如果必须拼接HTML，一定要对不可信内容做HTML转义：把特殊字符（<转成<，>转成>，&转成&等）转换成HTML实体，确保脚本标签、恶意属性等被当成普通文本显示。
• 尽量使用现代前端框架（如React、Vue），这类框架默认会对动态内容做转义处理，能大幅降低XSS风险。

内容的提问来源于stack exchange，提问作者elite idol