Chrome扩展Manifest V3沙箱页面内部导航被拦截问题求助

问题根源 #

Chrome扩展的沙箱页面默认受严格的隔离限制，即便目标页面在sandbox.pages列表内，直接通过<a>标签跳转也会被浏览器拦截——沙箱默认策略不允许跨沙箱页面的导航操作，而外部URL不受此限制是因为沙箱默认允许导航到外部源。

解决方案 #

方案1：修改沙箱CSP，允许同扩展内导航 #

在content_security_policy的sandbox指令中添加allow-top-navigation 'self'，明确允许沙箱页面导航到同一扩展内的页面。修改后的manifest.json配置如下：

"sandbox": {
    "pages": ["dashboard.html", "settings.html"]
},
"content_security_policy": {
    "sandbox": "sandbox allow-scripts allow-top-navigation 'self'; script-src 'self' https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js https://kit.fontawesome.com/aed6fb8201.js"
}

注意：此方案放宽了沙箱权限，若无需导航到外部URL，建议保留'self'限制以降低安全风险。

方案2：JavaScript动态切换页面内容（推荐，无权限放宽） #

放弃页面跳转，通过脚本获取目标页面的HTML并替换当前页面内容，保持沙箱的隔离性。修改dashboard.html的代码如下：

<ul>
    <p class="nav-desc">MAIN MENU</p>
    <li><a class="active" href="dashboard.html">
            <i class="fas fa-gauge"></i>
            <p> Dashboard</p>
        </a>
    </li>
    <li><a href="settings.html">
        <i class="fas fa-gear"></i>
        <p> Einstellungen</p>
    </a>
</ul>

<script>
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', async (e) => {
        e.preventDefault(); // 阻止默认跳转行为
        const targetUrl = link.getAttribute('href');
        const response = await fetch(targetUrl);
        const html = await response.text();
        document.body.innerHTML = html; // 替换当前页面内容
    });
});
</script>

方案3：通过iframe切换内容（无权限放宽） #

在主页面嵌入iframe，通过切换iframe的src属性实现内容切换，体验接近原生页面跳转：

<div class="nav-container">
    <ul>
        <p class="nav-desc">MAIN MENU</p>
        <li><a class="active" data-target="dashboard.html">
                <i class="fas fa-gauge"></i>
                <p> Dashboard</p>
            </a>
        </li>
        <li><a data-target="settings.html">
            <i class="fas fa-gear"></i>
            <p> Einstellungen</p>
        </a>
    </ul>
</div>
<iframe id="content-frame" src="dashboard.html" style="width:100%; height:calc(100vh - 80px); border:none;"></iframe>

<script>
document.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault();
        const targetUrl = link.getAttribute('data-target');
        document.getElementById('content-frame').src = targetUrl;
        // 更新导航栏激活状态
        document.querySelectorAll('a').forEach(a => a.classList.remove('active'));
        link.classList.add('active');
    });
});
</script>

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