如何使用 src 属性在 html 中打开安全 url

Question

我在 Azure 上托管了一个 API，它比较两个 pdf 文件并生成一个新的结果 pdf。我想使用嵌入标签在我的 html 网页中打开生成的 pdf。当我将 kudu 文件 url 放入 embed 标记的 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文件链接： https://testpdfcomparison.scm.azurewebsites.net/api/vfs/site/wwwroot/pdf/Output.pdf

Answer 1

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

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

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

实际上，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，然后部署它。您可以访问以下两个网址。

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