|
| 1 | +# Background |
| 2 | +We have received feedbacks that there is a need to access local files in WebView2. In this document we describe the APIs for this scenario. We'd appreciate your feedback. |
| 3 | + |
| 4 | + |
| 5 | +# Description |
| 6 | +To access local files in WebView2, define a virutal host name to local folder mapping using the `AddVirtualHostNameToFolderMapping` API, |
| 7 | +and then refer to local files under the folder with a normal http/https url with the virtual host name. |
| 8 | + |
| 9 | +# Examples |
| 10 | +Suppose the app has index.html file next to its exe file. The following code snippet demonstrates how to define a mapping |
| 11 | +for `app-file.invalid` host name so that it can be accessed from pages using normal http/https url like https://app-file.invalid/index.html. |
| 12 | + |
| 13 | +## Win32 C++ |
| 14 | +```cpp |
| 15 | +webview2->AddVirtualHostNameToFolderMapping( |
| 16 | + L"app-file.invalid", L".", COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_DENY_CORS); |
| 17 | +webview2->Navigate("https://app-file.invalid/index.html"); |
| 18 | +``` |
| 19 | +
|
| 20 | +## .Net and WinRT |
| 21 | +```c# |
| 22 | +webView.CoreWebView2.AddVirtualHostNameToFolderMapping( |
| 23 | + "app-file.invalid", ".", CoreWebView2HostResourceAccessKind.DenyCors); |
| 24 | +webView.Navigate("https://app-file.invalid/index.html"); |
| 25 | +``` |
| 26 | + |
| 27 | +# Remarks |
| 28 | +Choose a virtual host name that will not be used by real sites. |
| 29 | +If you own a domain (like example.com), an option is to use a sub domain reserved for the app (like my-app.example.com). |
| 30 | +If you don't own a domain, [RFC 6761](https://tools.ietf.org/html/rfc6761) has reserved several special-use domain names that would |
| 31 | +not be used by real sites, like .example, .test, and .invalid. |
| 32 | + |
| 33 | +Give only minimal cross orign access neccessary to run the app. If there is no need to access local resources |
| 34 | +from other origins, use COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_DENY. |
| 35 | + |
| 36 | +# API Notes |
| 37 | +See [API Details](#api-details) section below for API reference. |
| 38 | + |
| 39 | +# API Details |
| 40 | + |
| 41 | +## Win32 C++ |
| 42 | +The follow table illustrates the host resource cross origin access according to access context and `COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND`. |
| 43 | +Cross Origin Access Context | DENY | ALLOW | DENY_CORS |
| 44 | +--- | --- | --- | --- |
| 45 | +From DOM like src of img or script element| Deny | Allow | Allow |
| 46 | +From Script like Fetch or XMLHttpRequest| Deny | Allow | Deny |
| 47 | +```IDL |
| 48 | +/// Kind of cross origin resource access allowed for host resources during download. |
| 49 | +/// Note that other normal access checks like same origin DOM access check and [Content |
| 50 | +/// Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) still apply. |
| 51 | +[v1_enum] |
| 52 | +typedef enum COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND { |
| 53 | + /// All cross origin resource access is denied, including normal sub resource access |
| 54 | + /// as src of a script or image element. |
| 55 | + COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_DENY, |
| 56 | +
|
| 57 | + /// All cross origin resource access is allowed, including accesses that are |
| 58 | + /// subject to Cross-Origin Resource Sharing(CORS) check. The behavior is similar to |
| 59 | + /// a web site sends back http header Access-Control-Allow-Origin: *. |
| 60 | + COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_ALLOW, |
| 61 | +
|
| 62 | + /// Cross origin resource access is allowed for normal sub resource access like |
| 63 | + /// as src of a script or image element, while any access that subjects to CORS check |
| 64 | + /// will be denied. |
| 65 | + /// See [Cross-Origin Resource Sharing](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) |
| 66 | + /// for more information. |
| 67 | + COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_DENY_CORS, |
| 68 | +} COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND; |
| 69 | +
|
| 70 | +interface ICoreWebView2_2 : ICoreWebView2 { |
| 71 | +
|
| 72 | + /// Add a host name mapping for host resources in a folder. |
| 73 | + /// After adding the mapping, the app can then use http or https urls with the specified hostName as host name |
| 74 | + /// of the urls to access files in the local folder specified by folderPath. |
| 75 | + /// This applies to top level document and iframe navigations as well as sub resource references from a document. |
| 76 | + /// accessKind specifies the kind of access control to the host resources from other sites. |
| 77 | + /// Relative folderPath is supported and interpreted as relative to the exe path of the app. |
| 78 | + /// For example, after calling AddVirtualHostNameToFolderMapping(L"app-file.invalid", L".", |
| 79 | + /// COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND_DENY), navigating to https://app-file.invalid/my-local-file.html |
| 80 | + /// will show content from my-local-file.html in the same folder as the app's exe file. |
| 81 | + HRESULT AddVirtualHostNameToFolderMapping( |
| 82 | + [in] LPCWSTR hostName, |
| 83 | + [in] LPCWSTR folderPath, |
| 84 | + [in] COREWEBVIEW2_HOST_RESOURCE_ACCESS_KIND accessKind); |
| 85 | + /// Remove a host name mapping for local folder that was added by AddVirtualHostNameToFolderMapping. |
| 86 | + HRESULT RemoveVirtualHostNameToFolderMapping( |
| 87 | + [in] LPCWSTR hostName); |
| 88 | +} |
| 89 | +``` |
| 90 | + |
| 91 | +```c# |
| 92 | +namespace Microsoft.Web.WebView2.Core |
| 93 | +{ |
| 94 | + public enum CoreWebView2HostResourceAccessKind |
| 95 | + { |
| 96 | + Deny = 0, |
| 97 | + Allow = 1, |
| 98 | + DenyCors = 2 |
| 99 | + } |
| 100 | + |
| 101 | + public partial class CoreWebView2 |
| 102 | + { |
| 103 | + // There are other API in this interface that we are not showing |
| 104 | + public void AddVirtualHostNameToFolderMapping(string hostName, string folderPath, CoreWebView2HostResourceAccessKind accessKind); |
| 105 | + public void RemoveVirtualHostNameToFolderMapping(string hostName); |
| 106 | + } |
| 107 | +} |
| 108 | +``` |
0 commit comments