SecurityError (DOM Exception 18): The operation is insecure - three.js

I'm using 'FileMaker Pro' to show 'three.js' drawing with texture. All is fine inside FMP client, but as soon as I open it in WebDirect, I'm getting this error:
SecurityError (DOM Exception 18): The operation is insecure.
I load 'THREE.JS' from http like this (<> are removed):
script type='text/javascript' src='http://remote.plancher2000.com/three.js-master/build/three.js'/script
I load textures from JavaScript like this:
var floorMaterial = new THREE.MeshBasicMaterial( { map: 'http://remote.plancher2000.com/Escaliers%203D/1-3-2-5-Plancher.jpg' } );
They are both from the same server AND port.
Any clue?
Thank you.

In Safari, I found out that you can disable this restriction. In the Development menu (you may need to activate it), look for 'Disable local file restrictions'.
Some similar setting may exist for other browsers.

Related

What does the message "WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER." mean?

On Firefox 92, if you do something like
var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');
var debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
var vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL);
var renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
console.log(vendor);
console.log(renderer);
It will show a message saying
WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER.
What does it mean?
The relevant MDN docs didn't even mention anything about it being deprecated like it normally does.
And there's no WebGL extentions or methods in the WebGL API called RENDERER.
Google isn't any help either.
Apparently, you're meant to do this:
var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl');
gl.getParameter(gl.RENDERER)
Anyway, feel free to delete this question.
But I'm leaving it because there's no results when you google that warning message and hope this question can change that.
I ran into a similar issue where I was not calling
gl.getExtension('WEBGL_debug_renderer_info');
first. I had just been calling
const vendor = gl.getParameter(37455); // Underlying value of debugInfo.UNMASKED_VENDOR_WEBGL
const renderer = gl.getParameter(37456); // Underlying value of debugInfo.UNMASKED_RENDERER_WEBGL
And this gave me the error:
getParameter: invalid parameter name WEBGL_debug_renderer_info not enabled.
I had tried using the suggested gl.RENDERER, but that was not specific enough for what I wanted to do. The answer did help point me in the right direction of enabling the extension first (with getExtension), even when I know what the magic numbers will be.
Per the docs, it appears that it's only deprecated in Firefox. Digging a little deeper I think it has to do with privacy and the ability to how the API exposes information that can be used for fingerprinting
https://bugzilla.mozilla.org/show_bug.cgi?id=1722782

QML image loading issue

I can load an image stored in qrc resource at start up just fine but when I try to load the very same image (for demo purposes only), I get a 'QML Image: Cannot open: qrc:../....' error. Clicking on the image repeatedly will even give the same error to the same PNG file that was loaded at startup (with no error). It's as if the paths change once the program is up and running.Essentially, neither 'gray_button1.png' nor 'gray_button2.png' can be opened for reasons unknown once the program is running...
One other fact:the QML file running this script itself is stored/located in the QML.qrc file.
import QtQuick 2.7
Rectangle {
id: baseBtn
color: "transparent"
property string activeSource:"qrc:../Root/Images/gray_button1.png";
property string inactiveSource:"qrc:../Root/Images/gray_button2.png";
property string previousText:""
property bool active:false
onActiveChanged:{
if (active)
btnImage.source = activeSource;
else
btnImage.source = inactiveSource;
}
MouseArea{
id: mouseArea1
anchors.fill:parent
onClicked: {
active = !active;
}
Image {
id: btnImage
width:parent.width
height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
source:"qrc:../Root/Images/gray_button2.png"; //opens and loads fine at start up -> appears normal
z:0
}
}
}
Here is the file structure
Application
-->Root
---->Images
gray_button1.png
gray_button2.png
-->QML
qml.qrc
button.qml
...{*.qml}
Without being able to see your full project (including the qrc XML, for instance), it's a bit difficult to be able to suggest something concrete – I can't recall a problem like this one — but I'll try.
Unfortunately, Image is a little shy when it comes to reporting what exactly went wrong. I have a fix pending for this, but it probably won't be available until Qt 5.9 (though if you have your own Qt build, feel free to try it out, it might help you!)
If you aren't able to do that, I'd suggest trying to read the paths you're passing to Image using QImageReader (in C++), and making sure that what you are reading makes sense. You should be able to more easily access an error message there through printing the errorString() of the file, something like so:
QImageReader reader("qrc:/Root/Images/gray_button2.png");
QImage img = reader.read();
if (img.isNull()) {
qWarning() << "Something is wrong:" << reader.errorString();
}
If you find no problem that way, then I'd suggest simplifying the existing code you have, for instance, using absolute rather than relative paths, like qrc:/Root/Images/Whatever.png, taking the qrc out of the equation altogether, and continuing that way, cutting one piece after another out of this until you reach something that makes sense (and works, ideally reveals the culprit).
For what it's worth, I can't reproduce the problem you mention with the example QML you're showing here.

How to make UIloader work?

I have this project at school, where I am supposed to make an image recognizer not importing any photos into Flash. Here's the error I´m getting:
Error #2044: Unhandled ioError:. text=Error #2035: URL Not Found. URL: file
Anyway, this is the file (p.s. it's Norwegian. And yeah, I'm a noob, I know.)
http://www.megafileupload.com/en/file/507257/recognizer-fla.html
I have tried similar methods, but nothing seems to work - again, I'm a noob. I have only been coding for two months.
not importing any photos into Flash
It's easy to load external image. You will need Loader class, image will be represented as instance of the Bitmap class. If you get IOError, I assume your url isn't correct.
Example:
var loader: Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
loader.load(new URLRequest("http://www.billboard.com/files/styles/promo_650/public/stylus/1235529-taylor-swift-woman-of-the-year-617-409.jpg"));
function onComplete(e:Event):void{
var bitmap: Bitmap = LoaderInfo(e.currentTarget).content as Bitmap;
addChild(bitmap);
//Do whatever you want with the image
}

AS3: How do I definitively smooth a bitmap image loaded from an outside server

This issue has been following me around for almost a year now, and I want to kill it, for my sake and for the sake of all.
I'm working on some banner ads that need to load in images from a client's site for display. When I tried to do this using AS2, I found out that AS2 doesn't let you do that. It's a bug in the language. There are workarounds for images on the local server, but images loaded from are not allowed to share their BitmapData, so those workarounds don't work. I ended up capitulating after about two months of banging my head against the desk and cursing Macromedia.
Now we are talking about moving to AS3 (finally) and I'm really excited. Or, I was really excited until I started doing some tests for image quality and found that there is very little change in image quality happening here. It's a repeat of my trials with AS2: everything loads perfectly in the IDE, I get all excited, I move the swfs over to the test server to run them online, and POOF - jaggies. Jaggies everywhere.
I've read a number of solutions online, none of which work. They include:
Setting target.content.smoothing to "true". Works great in the IDE. All improvements disappear in the browser.
Setting target.scaleX = target.scaleY to 1.01. It just breaks the swf.
Adding "new LoaderContext(true)" to my parameters for the load command. Does nothing.
Setting target.content.pixelSnapping to "always". Looks perfect in the IDE, not in the browser.
Setting a crossdomain.xml file. The images are showing up - they're being loaded, even if jaggedly, so there must be a functioning crossdomain file on the client's server, right?
So now I'm just stuck, and brokenhearted. Could anyone offer insight on my code, and why it might not be rendering as beautifully as it should be? Here is the client-safe version of the quick demo I am making (only the image URL has been deleted, everything else is as it is now):
import flash.events.Event;
function completeHandler(e:Event) {
e.target.content.pixelSnapping = "always";
e.target.content.smoothing = true;
}
var imgurl:String = "CLIENT'S IMAGE URL HERE";
var imageLoader01:Loader = new Loader();
var image01:URLRequest = new URLRequest(imgurl);
imageLoader01.load(image01);
imageLoader01.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
addChild(imageLoader01);
imageLoader01.x = 2;
imageLoader01.y = 0;
imageLoader01.scaleX = imageLoader01.scaleY = .6;
var imageLoader02:Loader = new Loader();
var image02:URLRequest = new URLRequest(imgurl);
imageLoader02.load(image02);
imageLoader02.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
addChild(imageLoader02);
imageLoader02.x = 100;
imageLoader02.y = 80;
imageLoader02.scaleX = imageLoader02.scaleY = .308;
var imageLoader03:Loader = new Loader();
var image03:URLRequest = new URLRequest(imgurl);
imageLoader03.load(image03);
imageLoader03.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
addChild(imageLoader03);
imageLoader03.x = 200;
imageLoader03.y = 180;
imageLoader03.scaleX = imageLoader03.scaleY = .152;
var bannerLegend:legend = new legend();
addChild(bannerLegend);
Thank you very much in advance. Any help will be sorely appreciated.
Update: Here is the HTML embed code:
<div id="swf_mr_sc_wt_si"></div>
<script type="text/javascript">
<!--
var swfurl = "http://DOMAIN_WITHELD_SORRY/static/AS3.swf?m=DEFAULT&t=" + (new Date().getTime());
swfobject.embedSWF(swfurl, "swf_mr_sc_wt_si", 300, 250, "8.0.0", "");
// -->
</script>
<p>
Hope this helps.
Further Update: We are not listed in the crossdomain.xml file. But we can still load the jagged images. And those images, when loaded into the same swf run in the IDE, are smooth. I think I'm missing understanding of some kind of apocryphal knowledge here, because everything I read points to me being able to do this. This is VERY confusing.
It's because the image you're loading is located on another domain, and that domain's crossdomain.xml does not contain the domain the .swf is residing on, basically giving the .swf "permission" to access the image's pixel data (Yes, just enabling smoothing on an image loaded from another domain requires the same security as when reading the pixel data using BitmapData.draw(), which is a bit curious). When running in local security sandbox the restrictions are more lax, that's why it works running from the IDE.
Even if your domain were among the approved domains in the crossdomain.xml you might need to tell the Flash Player to check the policy file by sending in new LoaderContext(true) as a second argument to Loader.load() when loading the image.
Edit: I originally thought using loadBytes() would be a workaround, but it turns out it's not. I have removed that example code

How to smooth images loaded from server in ActionScript3

I'm trying to smooth an scaled image loaded from another website. The image is not animated.
It works well if I use a local image. but it seems not work with images loaded from remote server.
Here is the snippet:
...
//_loader.load(new URLRequest(http://img.example.com/remote.jpg));
_loader.load(new URLRequest("../assets/local.jpg"));
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
...
protected function completeHandler(event:Event):void
{
var image:Bitmap = Bitmap(event.target.content);
image.smoothing = true;
image.pixelSnapping = "never";
}
As tested, when I load local.jpg, it works perfect. But when I load remote.jpg from the server, the smoothing param didn't work.
Anyone knows why?
I searched everywhere, but no one has the same problem. I'm not using Flash Professional, it's a pure ActionScript Project built in Flash Builder. And the image is not animating. So wired...
Because you are pulling an image from a remote server you need to set a cross domain policy xml file on the web server where the image is held.
Without this you can't alter bitmaps at a sub pixel level.
Example of:
http://www.senocular.com/pub/adobe/crossdomain/policyfiles.html
More details
http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.edu.html
I searched day by day, and finally find the answer:
_loader.load( new URLRequest("http:…." , new LoaderContext(true));
The most important is the second param of load() method, it's a LoaderContext. Reference:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Loader.html#load()
Although I set the crossdomain file in the server, without the "new LoaderContext(true)", it won't read the crossdomain file. That's why it doesn't work at first.
If you have the same problem, hope it's helpful to you!

Resources