reactjs - 有没有办法避免 CEF Windows Chromium 桌面应用程序中的 X-Frame-Options？

Question

我使用建议的“app init”创建了一个简单的应用程序，然后我将预编译的 ReactApp 放到了适当的位置。该应用程序中有一个浏览器，该浏览器使用 IFrame 托管导航页面，但在某些页面中，它会发出以下错误:

拒绝显示“https://www.theverge.com/” ' 在框架中，因为它将 'X-Frame-Options' 设置为 'sameorigin'。”，来源:http://localhost:5000/#/

https://content-security-policy.com/

上面的页面提供了一系列避免这种情况的方法，Chromium 有一个可以提供帮助的标志，它会禁用安全性，正如其他帖子和问题中建议的那样，这可能有助于解决这个问题。

p>

除此之外，还有可能编写一个反向代理来处理这个问题。

无论哪种方式，我需要知道的是是否有一种方法可以通过“app”工具中的参数来实现，例如:

app --unsecure
app publish --unsecure
app publish-exe --unsecure

谢谢

Answer 1

我尝试了多种不同的选择，包括使用 Custom .NET Core Desktop Apps添加了曾经有效的 disable-web-security 开关:

static int Main(string[] args)
{
    var host = new WebHostBuilder()
        .UseKestrel()
        .UseContentRoot(Directory.GetCurrentDirectory())
        .UseStartup<Startup>()
        .UseUrls("http://localhost:5000/")
        .Build();

    host.StartAsync();

    var config = new CefConfig(Debug)
    {
        Args = args,
        StartUrl = startUrl,
        HideConsoleWindow = false,
        OnBeforeCommandLineProcessing = (processType, commandLine) => {
            commandLine.AppendSwitch("disable-web-security");                    
        }
    };

    return CefPlatformWindows.Start(config);
}

但现在看来此安全限制已嵌入到 Blink 中，不再如此。

使用代理删除 header

我可以开始工作的唯一解决方案是使用调用内部 .NET Core 服务器的代理，该服务器代理下游 URL 但忽略 X-Frame-Options header 。

使用 ServiceStack 的 Proxy Feature 很容易做到这一点你可以在哪里注册一个代理https://www.theverge.com剥离 X-Frame-Options header :

Plugins.Add(new ProxyFeature(
    matchingRequests: req => req.PathInfo.StartsWith("/theverge"),
    resolveUrl: req => $"https://www.theverge.com" + req.RawUrl.Replace("/theverge", "/")) {
    IgnoreResponseHeaders = {
        "X-Frame-Options"
    }
});

这将使您可以将 The Verge 嵌入到您的应用中:

<iframe src="/theverge" style="width:100%; height:800px;" frameborder="0"></iframe>

这将按预期在 iframe 中呈现 TheVerge:

工作演示

您可以在 ServiceStack.CefGlue.Win64.AspNetCore 中找到这方面的工作示例:

Startup.cs

public class Startup
{
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        app.UseServiceStack(new AppHost());

        app.Run(context =>
        {
            context.Response.Redirect("/metadata");
            return Task.FromResult(0);
        });
    }
}

public class AppHost : AppHostBase
{
    public AppHost() : base("MyApp", typeof(MyServices).Assembly) { }

    public override void Configure(Container container)
    {
        Plugins.Add(new SharpPagesFeature());

        Plugins.Add(new ProxyFeature(
            matchingRequests: req => req.PathInfo.StartsWith("/theverge"),
            resolveUrl: req => "https://www.theverge.com" + 
                                req.RawUrl.Replace("/theverge", "/")) {
            IgnoreResponseHeaders = {
                "X-Frame-Options"
            }
        });
    }
}

[Route("/hello")]
public class Hello : IReturn<HelloResponse>
{
    public string Name { get; set; }
}

public class HelloResponse
{
    public string Result { get; set; }
}

public class MyServices : Service
{
    public object Any(Hello request) => 
        new HelloResponse { Result = $"Hello, {request.Name}!" };
}

ServiceStack.CefGlue.Win64.AspNetCore.csproj

<PackageReference Include="Microsoft.AspNetCore.Server.Kestrel" Version="2.*" />
<PackageReference Include="ServiceStack.CefGlue.Win64" Version="5.*" />
<PackageReference Include="ServiceStack" Version="5.*" />
<PackageReference Include="ServiceStack.CefGlue" Version="5.*" />
<PackageReference Include="ServiceStack.CefGlue.Win64" Version="5.*" />
<PackageReference Include="WinApi" Version="4.0.0" />

您还需要从 ServiceStack.CefGlue.Win64 NuGet 包中复制 CEF 二进制文件:

<ItemGroup>
    <Content Include="locales\*.*">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="swiftshader\*.*">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="*.pak">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="*.lib">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="*.dat">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="*.dll">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="*.bin">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    <Content Include="*.exe">
        <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </Content>
    </ItemGroup>

    <Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
    <Copy SourceFiles="%(Content.Identity)"
            DestinationFiles="$(OutputPath)\%(Content.Link)"
            SkipUnchangedFiles="true"
            OverwriteReadOnlyFiles="true" />
</Target>

index.html

<!DOCTYPE html>
<html lang="en">
<body>
    <h1>X-Frame-Options Proxy Test</h1>
    <iframe src="/theverge" style="width:100%; height:800px;" frameborder="0"></iframe>
</body>
</html>