如何使用 src 属性在 html 中打开受保护的 url

Question

我有一个 API 托管在 Azure 上，它比较两个 pdf 文件并生成一个新的结果 pdf。我想使用嵌入标签在我的 html 网页中打开生成的 pdf。当我将 kudu 文件 url 放在嵌入标签的 src 属性中时，由于安全原因，它无法打开。当我使用 src="username:password@testpdfcomparison.scm.azurewebsites.net/api/vfs/site/wwwroot/pdf/Output.pdf" 然后我在浏览器中得到这个错误：

其 URL 包含嵌入式凭据（例如 https://user:pass@host/）的子资源请求被阻止。有关详细信息，请参阅 https://www.chromestatus.com/feature/5669008342777856。

实际上我想用静默登录打开此 pdf 文件。我可以通过 jquery 或 c#

以任何其他方式执行此操作吗

这是 pdf 文件 link： https://testpdfcomparison.scm.azurewebsites.net/api/vfs/site/wwwroot/pdf/Output.pdf

Answer 1

我不知道为什么你的 .pdf 文件路径包含 scm.

不管你的程序使用什么语言代码，生成的pdf文件，在当前运行环境下存放在某个文件夹下，必须使用相对路径。（推荐如果有很多文件，则使用 azure 存储）

azure webapp中的文件路径包含scm，所以需要进行授权验证。比如你提供的文档link，我的账号没有访问权限。如下图。

事实上，azure app services 本质上是一个iis。我们写代码的时候，需要存储文件。推荐使用relative paths。文件路径如下，我的示例代码是.net core 3.0.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }
        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "Html")),
            RequestPath = "/Html"
        });
        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "PDF")),
            RequestPath = "/PDF"
        });
        app.UseStaticFiles(new StaticFileOptions
        {
            FileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "api")),
            RequestPath = "/api"
        });
        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }

您可以 download my sample code 并部署它。您可以访问以下两个网址。

https://yourwebsitename.azurewebsites.net/Html/a.html .
https://yourwebsitename.azurewebsites.net/api/vfs/site/wwwroot/pdf/testpdf.pdf .

如何使用 src 属性在 html 中打开受保护的 url

How to open secured url in html using src attribute

html

c#

jquery

kudu

azure-web-app-service