未引用的 'href' 属性被异步加载阻止

Question

我使用搜索工具管理一个静态网站，该搜索工具使用分类术语结构作为数据源来查找符合某些条件的链接，然后异步加载这些链接并进行解析以构建 UI。

分类术语的结构是这样的：

<ul>
    <li data-term="TaxonomyTermOfFirstLevel">TaxonomyTermOfFirstLevel
        <ul>
            <li data-term="TaxonomyTermOfSecondLevel">TaxonomyTermOfSecondLevel
                <ul>
                    <li data-term="TaxonomyTerm">
                        <a href="https://www.example.com/some-page/">Some Page</a>
                    </li>
                </ul>
             </li>
         </ul>
      </li>
</ul>

以及加载例程的（片段）：

var cache = {};

function load( url ) {

    if( ! cache[ url ] ) {
        cache[ url ] = $.ajax( url );
    }

    return cache[ url ];
}

使用未缩小的 HTML 输出，一切正常。但是，当使用同时删除属性周围引号的极端工具对其进行缩小时，对上述结构中发现的 URL 发出的所有请求都会失败，并出现以下错误：

Mixed Content: The page at 'https://www.example.com/search/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.example.com/some-page/'. This request has been blocked; the content must be served over HTTPS.

如您所见，请求者 (/search) 和被请求者 (/some-page) 都在同一个域中，但浏览器表示被请求的 URL 是不安全的，因为它是不在 SSL 下。但是，如果您查看我提供的片段，请求的 URL 确实具有 https 架构前缀。

我对此进行了详尽的搜索但没有成功，只有当我停用输出缩小一切恢复到工作状态时。然后我分析了涉及搜索过程的所有内容，从 HTML 到负责搜索的每个 JS 文件（毕竟它是一个静态站点），我只注意到两个区别：

href 属性（很明显）缺少引号。
事实上 URLs 指向根目录中的文件夹，每个文件夹都有一个 index.html 文件（即 /same-page/index.html），导致伪友好重定向-url。但据我所知，这不是问题，因为 jQuery 会透明地遵循重定向，对吧？

在这种情况下，我的替代方案是使用另一个不删除引号的缩小器，而不是 tdewolff's minifier，Hugo 静态站点生成器的内置选择用于创建所有 HTML 个文件。

还有什么我想念的吗？

Answer 1

由于静态站点中的 "Friendly URLs" 只是嵌套目录，其中包含 index.html 文件，因此所有 URL 请求必须以尾部斜杠结尾 -OR - 在请求 with/by AJAX.

之前附加上述文件

但是，正如您在本主题中所描述的案例中看到的那样——在 this testing repository 中进行了深入探讨——无论所有 URL 都在后台有一个尾部斜线 ，在异步请求过程的某个时刻，这些尾部斜线被删除、忽略，或者考虑到涉及 HTML 缩小器的事实，被浏览器误解。

为了解决这个问题，我只是在我请求的 URL 后面加了一个斜杠。因为上面显示的包装函数 load 非常通用，所以我不会解决那里的情况，因为并非所有 URL 都会产生 301 重定向，所以，相反，我只在检索后应用修复href 属性：

var url = $( 'some selector' ).find( 'a' ).attr( 'href' ).replace( /\/?$/, '/' );

"ace in the hole" 是 replace 函数，它将保持现有的尾部斜杠不变，但会在缺少的地方添加一个斜杠，无论是错误构建的 <a> 标签还是错误的删除 —因为这似乎是正在发生的事情。

Note: For a further understanding of the context and the fix above, check the already linked repository or, at least, the extended discussion on this issue of the mentioned minifier.

我希望这对以后的其他人有所帮助，因为至少与特定软件无关的内容将作为搜索结果提供。

未引用的 'href' 属性被异步加载阻止

Unquoted 'href' attributes blocked from an asynchronous load

html

jquery

minify