Articles in this series:<\/p>\n\n\n\n
- Part 1: Introduction to Edge and WebView2<\/a><\/li>
- Part 2: Creating a WebView2 component<\/a><\/li>
- Part 3: Navigation and other events<\/a><\/li>
- Part 4: Performing navigation with custom data and headers<\/li>
- Part 5: Executing JavaScript code<\/a><\/li>
- Part 6: Printing a web page<\/a><\/li><\/ul>\n<\/div><\/div>\n\n\n\n
Overview<\/h2>\n\n\n\n
There are times when you must perform navigation to a page using a GET or POST request that requires custom headers or content (for a POST). This is not possible with the
ICoreWebView2::Navigate()<\/code> but it is available withICoreWebView2_2::NavigateWithWebResourceRequest()<\/code>. This method takes a pointer to an object implementing theICoreWebView2WebResourceRequest<\/code><\/a> interface. This interface defines an HTTP request, providing properties for the URI, method, headers, and content.<\/p>\n\n\n\nThe argument passed to this function must be created with the
ICoreWebView2Environment2::CreateWebResourceRequest()<\/code><\/a> method. This method takes four input parameters for URI, method, content (i.e. post data), and headers, and an output parameter representing a pointer to the object that implementsICoreWebView2WebResourceRequest<\/code>.<\/p>\n\n\n\nThe headers specified when calling this function override the headers added by WebView2 runtime except for
Cookie<\/code> headers. The HTTP method can only beGET<\/code> orPOST<\/code>. The content you specify is sent only if the method isPOST<\/code> and the scheme is HTTP or HTTPS.<\/p>\n\n\n\nExtending the CWebBrowser class<\/h2>\n\n\n\n
In this section, we will extent the
CWebBrowser<\/code> class seen in the previous articles, to support navigation with a POST request. For this purpose, we will first add a new method calledNavigatePost()<\/code>:<\/p>\n\n\n\nclass CWebBrowser : public CWnd\n{\npublic:\n void NavigatePost(CString const& url, CString const& content, CString const& headers, CallbackFunc onComplete = nullptr);\n};<\/pre>\n\n\n\nIn the previous section, I have mentioned two new interfaces added to the SDK to support this new feature:
ICoreWebView2Environment2<\/code> andICoreWebView2_2<\/code>. We need to add pointers to these interfaces in order to call the required methods.<\/p>\n\n\n\nstruct CWebBrowserImpl\n{\n wil::com_ptr<ICoreWebView2Environment> m_webViewEnvironment;\n wil::com_ptr<ICoreWebView2Environment2> m_webViewEnvironment2;\n wil::com_ptr<ICoreWebView2> m_webView;\n wil::com_ptr<ICoreWebView2_2> m_webView2;\n wil::com_ptr<ICoreWebView2Controller> m_webController;\n wil::com_ptr<ICoreWebView2Settings> m_webSettings;\n};<\/pre>\n\n\n\nWe need to make small changes to
OnCreateEnvironmentCompleted()<\/code> andOnCreateWebViewControllerCompleted()<\/code> in order to initialize these variables.<\/p>\n\n\n\nHRESULT CWebBrowser::OnCreateEnvironmentCompleted(\n HRESULT result, \n ICoreWebView2Environment* environment)\n{\n CHECK_FAILURE(result);\n\n if (!environment)\n return E_FAIL;\n\n CHECK_FAILURE(environment->QueryInterface(IID_PPV_ARGS(&m_pImpl->m_webViewEnvironment)));\n CHECK_FAILURE(environment->QueryInterface(IID_PPV_ARGS(&m_pImpl->m_webViewEnvironment2)));\n\n if (!m_pImpl->m_webViewEnvironment)\n return E_FAIL;\n\n CHECK_FAILURE(m_pImpl->m_webViewEnvironment->CreateCoreWebView2Controller(\n m_hWnd,\n Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(\n this,\n &CWebBrowser::OnCreateWebViewControllerCompleted).Get()));\n\n return S_OK;\n}\n\nHRESULT CWebBrowser::OnCreateWebViewControllerCompleted(\n HRESULT result,\n ICoreWebView2Controller* controller)\n{\n if (result == S_OK)\n {\n if (controller != nullptr)\n {\n m_pImpl->m_webController = controller;\n CHECK_FAILURE(controller->get_CoreWebView2(&m_pImpl->m_webView));\n\n if (!m_pImpl->m_webView)\n return E_FAIL;\n\n CHECK_FAILURE(m_pImpl->m_webView->QueryInterface(IID_PPV_ARGS(&m_pImpl->m_webView2)));\n\n CHECK_FAILURE(m_pImpl->m_webView->get_Settings(&m_pImpl->m_webSettings));\n\n \/\/ We have a few of our own event handlers to register here as well\n RegisterEventHandlers();\n\n \/\/ Set the initial size of the WebView\n ResizeEverything();\n }\n\n auto callback = m_callbacks[CallbackType::CreationCompleted];\n if (callback != nullptr)\n RunAsync(callback);\n }\n else\n {\n CString text;\n GetAppObject()->GetLangText(TEXT_MSG, ERR_CANNOT_CREATE_WEBVIEW_ENV, 0, text);\n ShowFailure(result, text);\n }\n\n return S_OK;\n}<\/pre>\n\n\n\nThese variables should be set to
nullptr<\/code> when closing the web view.<\/p>\n\n\n\nvoid CWebBrowser::CloseWebView()\n{\n if (m_pImpl->m_webView)\n {\n m_pImpl->m_webView->remove_NavigationCompleted(m_navigationCompletedToken);\n m_pImpl->m_webView->remove_NavigationStarting(m_navigationStartingToken);\n m_pImpl->m_webView->remove_DocumentTitleChanged(m_documentTitleChangedToken);\n\n m_pImpl->m_webController->Close();\n\n m_pImpl->m_webController = nullptr;\n m_pImpl->m_webView = nullptr;\n m_pImpl->m_webView2 = nullptr;\n m_pImpl->m_webSettings = nullptr;\n }\n\n m_pImpl->m_webViewEnvironment = nullptr;\n m_pImpl->m_webViewEnvironment2 = nullptr;\n}<\/pre>\n\n\n\nThe implementation of the
NavigatePost()<\/code> is fairly straight forward (based on the information from the Overview section):<\/p>\n\n\n\n\/\/ The raw request header string delimited by CRLF(optional in last header).\nvoid CWebBrowser::NavigatePost(CString const& url, CString const& content, CString const& headers, std::function<void()> onComplete)\n{\n if (!m_pImpl->m_webView) return;\n\n CString normalizedUrl{ NormalizeUrl(url) };\n\n m_callbacks[CallbackType::NavigationCompleted] = onComplete;\n \n wil::com_ptr<ICoreWebView2WebResourceRequest> webResourceRequest;\n wil::com_ptr<IStream> postDataStream = SHCreateMemStream(\n reinterpret_cast<const BYTE*>(static_cast<LPCTSTR>(content)),\n content.GetLength() + 1);\n\n CHECK_FAILURE(m_pImpl->m_webViewEnvironment2->CreateWebResourceRequest(\n CT2W(normalizedUrl),\n L\"POST\",\n postDataStream.get(),\n CT2W(headers),\n &webResourceRequest));\n\n CHECK_FAILURE(m_pImpl->m_webView2->NavigateWithWebResourceRequest(webResourceRequest.get()));\n}<\/pre>\n\n\n\nPutting it to test<\/h2>\n\n\n\n
To test this implementation, I have created a simple endpoint for a POST request using the Post Test Server V2 service<\/a>. The endpoint description is available at https:\/\/ptsv2.com\/t\/jep76-1611756376<\/a>. What we’re doing here, is making a POST request using basic authorization, and therefore requiring the
Authorization<\/code> header. There is no content that is passed, and the response has the following body:<\/p>\n\n\n\n<h1>Thank you for trying this demo.<\/h1>\n<p>I hope you have a lovely day!<\/p><\/pre>\n\n\n\n
We can navigate to this URL with the following code (notice that the base64 encoding of the username:password text is hardcoded for simplicity):<\/p>\n\n\n\n
void CMainFrame::OnBnClickedButtonTestPost()\n{\n auto view = dynamic_cast<CMfcEdgeDemoView*>(GetActiveView());\n if (view != nullptr)\n {\n CString content;\n\n \/\/ see https:\/\/ptsv2.com\/t\/jep76-1611756376\n CString headers = L\"Authorization:Basic ZGVtbzpkZW1v\\r\\nUser-Agent:WebView2 Demo\";\n\n view->NavigatePost(L\"https:\/\/ptsv2.com\/t\/jep76-1611756376\/post\", content, headers);\n }\n}<\/pre>\n\n\n\nAnd this is the result of making this call:
![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2021\/01\/edgepost.png\")
<\/p>\n\n\n\nAlso, if we check the request dump at ptsv2.com, we can look at the headers. We can see the
Authorization<\/code> and theUser-Agent<\/code> headers had the content we provided in the previous snippet.![\"\"](\"https:\/\/mariusbancila.ro\/blog\/wp-content\/uploads\/2021\/01\/edgeheaders.png\")
<\/p>\n\n\n\nTry the app<\/h2>\n\n\n\n
You can download, build, and try the sample app for this series from here:
- Part 2: Creating a WebView2 component<\/a><\/li>