3d - Dave's Blog

Search
My timeline on Mastodon

Windows.Web.UI.Interop.WebViewControl localhost access

2018 Jul 25, 5:34

If you're developing with the new Windows.Web.UI.Interop.WebViewControl you may have noticed you cannot navigate to localhost HTTP servers. This is because the WebViewControl's WebView process is a UWP process. All UWP processes by default cannot use the loopback adapter as a security precaution. For development purposes you can allow localhost access using the checknetisolation command line tool on the WebViewControl's package just as you can for any other UWP app. The command should be the following:

checknetisolation loopbackexempt -a -n=Microsoft.Win32WebViewHost_cw5n1h2txyewy

As a warning checknetisolation is not good on errors. If you attempt to add a package but get its package family name wrong, checknetisolation just says OK:

C:\Users\davris>checknetisolation LoopbackExempt -a -n=Microsoft.BingWeather_4.21.2492.0_x86__8wekyb3d8bbwe
OK.
And if you then list the result of the add with the bad name you'll see the following:
[1] -----------------------------------------------------------------
Name: AppContainer NOT FOUND
SID: S-1-15-...

There's also a UI tool for modifying loopback exemption for packages available on GitHub and also one available with Fiddler.

As an additional note, I mentioned above you can try this for development. Do not do this in shipping products as this turns off the security protection for any consumer of the WebViewControl.

PermalinkCommentschecknetisolation loopback security uwp webview win32webview

Tiny browser features: JSBrowser zoom

2018 May 10, 3:49

JSBrowser is a basic browser built as a Win10 JavaScript UWP app around the WebView HTML element. Its fun and relatively simple to implement tiny browser features in JavaScript and in this post I'm implementing zoom.

My plan to implement zoom is to add a zoom slider to the settings div that controls the scale of the WebView element via CSS transform. My resulting zoom change is in git and you can try the whole thing out in my JSBrowser fork.

Slider

I can implement the zoom settings slider as a range type input HTML element. This conveniently provides me a min, max, and step property and suits exactly my purposes. I chose some values that I thought would be reasonable so the browser can scale between half to 3x by increments of one quarter. This is a tiny browser feature after all so there's no custom zoom entry.

<a><label for="webviewZoom">Zoom</label><input type="range" min="50" max="300" step="25" value="100" id="webviewZoom" /></a>

To let the user know this slider is for controlling zoom, I make a label HTML element that says Zoom. The label HTML element has a for attribute which takes the id of another HTML element. This lets the browser know what the label is labelling and lets the browser do things like when the label is clicked to put focus on the slider.

Scale

There are no explicit scale APIs for WebView so to change the size of the content in the WebView we use CSS.

        this.applyWebviewZoom = state => {
const minValue = this.webviewZoom.getAttribute("min");
const maxValue = this.webviewZoom.getAttribute("max");
const scaleValue = Math.max(Math.min(parseInt(this.webviewZoom.value, 10), maxValue), minValue) / 100;

// Use setAttribute so they all change together to avoid weird visual glitches
this.webview.setAttribute("style", [
["width", (100 / scaleValue) + "%"],
["height", "calc(" + (-40 / scaleValue) + "px + " + (100 / scaleValue) + "%)"],
["transform", "scale(" + scaleValue + ")"]
].map(pair => pair[0] + ": " + pair[1]).join("; "));
};

Because the user changes the scale at runtime I accordingly replace the static CSS for the WebView element with the script above to programmatically modify the style of the WebView. I change the style with one setAttribute call to do my best to avoid the browser performing unnecessary work or displaying the WebView in an intermediate and incomplete state. Applying the scale to the element is as simple as adding 'transform: scale(X)' but then there are two interesting problems.

The first is that the size of the WebView is also scaled not just the content within it. To keep the WebView the same effective size so that it still fits properly into our browser UI, we must compensate for the scale in the WebView width and height. Accordingly, you can see that we scale up by scaleValue and then in width and height we divide by the scaleValue.

transform-origin: 0% 0%;

The other issue is that by default the scale transform's origin is the center of the WebView element. This means when scaled up all sides of the WebView would expand out. But when modifying the width and height those apply relative to the upper left of the element so our inverse scale application to the width and height above aren't quite enough. We also have to change the origin of the scale transform to match the origin of the changes to the width and height.

PermalinkCommentsbrowser css-transform javascript JS jsbrowser uwp webview win10

Retweet of timbray

2016 Feb 17, 1:07
Super-cool unicode character search: http://www.amp-what.com/unicode/search/check …
PermalinkComments

Retweet of doctorow

2016 Feb 8, 5:08
A digital, 3D printed sundial whose precise holes cast a shadow displaying the current time https://boingboing.net/2016/02/09/a-digital-3d-printed-sundial.html … pic.twitter.com/zTSRoXL9a7
PermalinkComments

Retweet of ericlaw

2016 Jan 26, 5:09
pic.twitter.com/cxDdy6pDax
PermalinkComments

Retweet of ericlaw

2016 Jan 21, 10:22
Madlibs for the 21st Century https://twitter.com/technicallyron/status/690175736225882112 …
PermalinkComments

Retweet of ericlaw

2015 Dec 22, 7:08
I want users to win. I want the web to win, and I want to make life harder for bad guys every day. My next role: http://textslashplain.com/2015/12/23/my-next-adventure/ …
PermalinkComments

Retweet of ericlaw

2015 Dec 21, 10:09
Looking back and forward: blog post Telerik Fiddler Segue http://www.telerik.com/blogs/fiddler-a-segue …
PermalinkComments

Retweet of ericlaw

2015 Oct 16, 6:47
For the First Time Ever, a Prosecutor Will Go to Jail* for Wrongfully Convicting an Innocent Man http://www.huffingtonpost.com/mark-godsey/for-the-first-time-ever-a_b_4221000.html …. *For 10 days.
PermalinkComments

Retweet of ahl

2015 Sep 22, 9:35
traceroute http://bad.horse 
PermalinkComments

Retweet of lyndonhood

2015 Aug 19, 4:07
So I wondered what would happen if you replaced every adjective in a Lovecraft story with 'spooky'. pic.twitter.com/VjlQAV7tap
PermalinkComments

Retweet of lakey

2015 Aug 3, 2:26
@danbarker Lots more lovely 3D tube maps here: http://bit.ly/1P33Tws 
PermalinkComments

Retweet of ericlaw

2015 Jul 26, 12:44
This is profoundly troubling, especially after learning that a recent mass shooting was executed via such a gun. http://www.wired.com/2015/06/i-made-an-untraceable-ar-15-ghost-gun/ …
PermalinkComments

Retweet of ericlaw

2015 Jul 14, 7:56
"4KTV: MPEG artifacts never looked so good!"
PermalinkComments

Retweet of ericlaw

2015 Jul 7, 7:41
Love it: "Never give your parents a hard time about having to teach them computer stuff. They had to teach you to use a spoon."
PermalinkComments

Retweet of lizzyns

2015 Apr 10, 9:59
Yo' mama contest with Sigmund Freud pic.twitter.com/lzucszBr1A
PermalinkComments

Retweet of ericlaw

2015 Apr 2, 12:23
Nice writeup of the attack on GitHub: http://blog.erratasec.com/2015/04/pin-pointing-chinas-attack-against.html#.VRye4mK9KK0 …
PermalinkComments

Retweet of ericlaw

2015 Mar 30, 12:19PermalinkComments

Retweet of engadget

2015 Mar 15, 10:04
Here's how you make a 3D printing gun using Lego http://engt.co/1CmjeEy  pic.twitter.com/ZBFc50xZL2
PermalinkComments

Retweet of lessig

2015 Mar 11, 8:47
Join the Mayday v2 Thunderclap? @ThunderclapIt // @MAYDAYUS http://thndr.it/1Eyi2Ow 
PermalinkComments
Older Entries Creative Commons License Some rights reserved.