页面导航时如何实现JWT认证？innerHTML加载脚本失效求助

一、修复innerHTML加载后脚本不执行的问题 #

浏览器不会自动执行通过innerHTML插入的<script>标签，需要手动提取脚本内容并重新创建脚本元素插入页面。修改后的代码如下：

document.addEventListener('DOMContentLoaded', function () {
    fetch(authCurrentURL, {
        method: 'POST',
        headers: {
            'Authorization': `Bearer ${JWT}`
        }
    })
    .then(response => {
        if (response.ok) {
            return response.text();
        } else {
            sessionStorage.removeItem('DaypassToken');
            localStorage.removeItem('NPCTavernToken');
            throw new Error('Authentication failed');
        }
    })
    .then(htmlContent => {
        // 解析HTML内容为DOM对象
        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlContent, 'text/html');
        
        // 替换当前页面body内容
        document.body.innerHTML = doc.body.innerHTML;
        
        // 提取并执行所有脚本
        const scripts = doc.querySelectorAll('script');
        scripts.forEach(script => {
            const newScript = document.createElement('script');
            // 处理内联脚本内容
            if (script.textContent) {
                newScript.textContent = script.textContent;
            }
            // 处理外部脚本地址
            if (script.src) {
                newScript.src = script.src;
            }
            // 复制原脚本的属性（如type、async等）
            script.attributes.forEach(attr => {
                newScript.setAttribute(attr.name, attr.value);
            });
            document.body.appendChild(newScript);
        });
    })
    .catch(error => {
        console.log(error);
    });
});

二、更优的带Authorization头的页面访问方案 #

浏览器原生页面导航（如a标签跳转、直接输入URL）无法携带自定义请求头，推荐以下两种更合理的方案：

1. 使用HttpOnly Cookie存储JWT #

这是生产环境最安全的方案：

• 后端登录验证成功后，设置Cookie：Set-Cookie: token=xxx; HttpOnly; Secure; SameSite=Strict; Path=/
• 后续所有页面请求（包括导航）都会自动携带该Cookie，后端直接从Cookie中提取JWT验证权限
• 优势：避免XSS攻击（HttpOnly Cookie无法被前端JS读取），无需前端手动处理请求头
• 注意：需配合CSRF防护，比如后端生成CSRF Token嵌入页面，前端提交POST请求时携带该Token

2. 单页应用（SPA）模式 #

采用前端路由实现页面切换，全程通过AJAX/fetch动态加载内容：

• 初始加载一个基础HTML页面，后续所有页面切换由前端路由控制，不触发浏览器完整刷新
• 每次动态加载页面内容时，在fetch请求中携带Authorization头
• 优势：完全控制请求头，无需依赖Cookie，适合前后端分离架构
• 核心流程：
  • 用户登录后，将JWT存入localStorage或sessionStorage
  • 前端路由切换时，调用fetch接口获取目标页面内容，携带Authorization: Bearer ${JWT}头
  • 将获取到的内容渲染到页面指定区域

3. URL参数传递Token（不推荐） #

仅适合临时测试或非敏感页面：

• 将JWT作为URL参数传递，如https://yourdomain.com/page?token=xxx
• 后端从URL参数中提取Token验证权限
• 劣势：Token会暴露在浏览器历史、服务器日志中，存在安全风险

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