1

I'am trying to use the CefSharp.Wpf NuGet package (v79.1.360) to display a simple html web page from disk.

The page has dependencies to local files (javascript, css, etc. ...) in a different directory than the page itself.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="file:///G:/AngularJS/Framework/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="MyApp.css">

    <script src="file:///G:/AngularJS/Framework/angular.min.js"></script>
    <script src="file:///G:/AngularJS/Framework/jquery.min.js"></script>
    <script src="file:///G:/AngularJS/Framework/bootstrap.min.js"></script>
    <script src="MyApp.js"></script>

    <title></title>
</head>
<body>
            <p class="font-weight-bold">Select address</p>

            <table class="table table-hover">
                <thead>
                    <tr class="bg-primary">
                        <th scope="col">ID</th>
                        <th scope="col">Name</th>
                        <th scope="col">Code</th>
                        <th scope="col">City</th>
                        <th scope="col">Street</th>
                    </tr>
                </thead>

                <tbody>
                    <tr ng-repeat="address in Model.AddressList"
                        ng-click="Model.PickRow(address)"
                        ng-style="{'background-color': address.Background}">
                        <td>{{address.Id}}</td>
                        <td>{{address.Name}}</td>
                        <td>{{address.PostalCode}}</td>
                        <td>{{address.City}}</td>
                        <td>{{address.Street}}</td>
                    </tr>
                </tbody>
            </table>
</body>
</html>

I'm able to display the page on a chromium based web browser (Firefox) with modified settings: security.fileuri.strict_origin_policy false

-> Firefox isn't a chromium based web browser, so I tested it with google chrome and it worked too.

On my web research I found this post related to the issue (unfortunately this post is from 2014):

https://github.com/cefsharp/CefSharp/issues/572

So I tried to set the browser settings for the cef sharp control:

<Window x:Class="WebControl.MyWebBrowser"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cefSharpCore="clr-namespace:CefSharp;assembly=CefSharp.Core"
        xmlns:cefSharpWpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        Height="300" Width="300">
    <Grid>
        <cefSharpWpf:ChromiumWebBrowser>
            <cefSharpWpf:ChromiumWebBrowser.BrowserSettings>
                <cefSharpCore:BrowserSettings WebSecurity="Disabled"
                                              FileAccessFromFileUrls="Enabled"
                                              UniversalAccessFromFileUrls="Enabled"/>
            </cefSharpWpf:ChromiumWebBrowser.BrowserSettings>
        </cefSharpWpf:ChromiumWebBrowser>
    </Grid>
</Window>

But this doesn't work. I also tried to set the settings in the code behind file without success.

Long story short:

Current result Expected result

If someone has a solution please let me know.

Thanks in advance for reading the post :-)

4
  • Firefox isn't a chromium browser. Have you confirmed that it works in Chrome? As per github.com/cefsharp/CefSharp/wiki/General-Usage#file-uri-file I'd strongly discouraged anyone from using the File scheme. The recommended approach is github.com/cefsharp/CefSharp/wiki/General-Usage#scheme-handler Commented Apr 6, 2020 at 19:56
  • Yes you're right: Firefox isn't chromium based, my fault :-) I tested it with google chrome and it worked like a charm. Because you discourage anyone from using file scheme I'll try the scheme handler way. Thank you for your response. Commented Apr 7, 2020 at 5:40
  • If you can move your files around you can use cefsharp.github.io/api/79.1.x/html/… Commented Apr 7, 2020 at 6:36
  • @HeikoR hi, i am trying to use cefsharp with wpf but i have problem with the use of local files, i see you have a complete sample wich is ok, could you share it ? Commented May 17, 2023 at 13:57

1 Answer 1

2

Thanks to amaitland for leading me to the right direction:

I strongly advise against using file:/// when loading from local disk. Different security restrictions apply and there are many limitations. I'd suggest using a Scheme handler or implementing your own IResourceRequestHandlerFactory. (Loading a data: encoded URI is also pretty handy, specially for the OffScreen project). If you choose to ignore this advice you'll have to resolve any issues you have using file:/// yourself. ceforum is the best resource.

Copied from: https://github.com/cefsharp/CefSharp/wiki/General-Usage#file-uri-file

The solution is to create a custom scheme handler:

https://github.com/cefsharp/CefSharp/wiki/General-Usage#scheme-handler

1) I addeded angular, bootstrap and jquery files as resources to my visual studio project.

2) I created DiskSchemeHandlerFactory.cs:

public class DiskSchemeHandlerFactory : ISchemeHandlerFactory
{
    private static readonly string _SchemeName = "disk";
    private static readonly IDictionary<string, string> _ResourceDictionary;


    public string SchemeName
    {
        get { return _SchemeName; }
    }


    static DiskSchemeHandlerFactory()
    {
        _ResourceDictionary = new Dictionary<string, string>
        {
            { "/angular.min.js", Properties.Resources.angular_min },
            { "/angular.min.js.map", Properties.Resources.angular_min_js },
            { "/bootstrap.min.js", Properties.Resources.bootstrap_min1 },
            { "/bootstrap.min.css", Properties.Resources.bootstrap_min },
            { "/jquery.min.js", Properties.Resources.jquery_min }
        };
    }


    public IResourceHandler Create(IBrowser browser, IFrame frame, string schemeName, IRequest request)
    {
        //Notes:
        // - The 'host' portion is entirely ignored by this scheme handler.
        // - If you register a ISchemeHandlerFactory for http/https schemes you should also specify a domain name
        // - Avoid doing lots of processing in this method as it will affect performance.
        // - Uses the Default ResourceHandler implementation

        var uri = new Uri(request.Url);
        var fileName = uri.AbsolutePath;

        string resource;
        if (_ResourceDictionary.TryGetValue(fileName, out resource) && !string.IsNullOrEmpty(resource))
        {
            var fileExtension = Path.GetExtension(fileName);
            return ResourceHandler.FromString(resource, fileExtension);
        }

        return null;
    }
}

3) I modified the static constructor of MyWebBrowser.xaml.cs:

    static MyWebBrowser()
    {
        if (Cef.IsInitialized == false)
        {
            var diskSchemeHandlerFactory = new DiskSchemeHandlerFactory();

            var settings = new CefSettings();
            settings.RegisterScheme(new CefCustomScheme()
            {
                SchemeName = diskSchemeHandlerFactory.SchemeName,
                SchemeHandlerFactory = diskSchemeHandlerFactory
            });

            Cef.Initialize(settings);
        }
    }

4) Finally I changed the file paths of the html page:

<script src="disk://angular/angular.min.js"></script>
<script src="disk://jquery/jquery.min.js"></script>
<script src="disk://bootstrap/bootstrap.min.js"></script>

Maybe I modify it to work with full file paths too. With this solution I have to compile my project each time I want to use another file...

Sign up to request clarification or add additional context in comments.

1 Comment

it works. N.B return ResourceHandler.FromString(resource, fileExtension) is now ResourceHandler.FromString(resource, mimeType: Cef.GetMimeType(Path.GetExtension(fileName))). thanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.