EDIT :
I've submitted the issue to their GitHub : https://github.com/OnsenUI/OnsenUI/issues/936
EDIT 2 : It's being taken care of ;)
(Sorry for my English, it's not my native language ;) )
This is my first question on stackoverflow. For now, I've always find that someone else have had the same problem as me, and got an answer.
But this time, I can't seem to find a solution, so either I'm the first one, or I'm missing something.
I'm developing a app for Windows Phone and Android (for now), using cordova, onsenui (so angular), and jQuery (thought I don't think this last one is causing trouble here).
I decided that I'll start using CSP the right way, to get a more secure app.
I've added <meta http-equiv="Content-Security-Policy" content="default-src 'self' http://foo.com> in the index.html page, to start with.
I've found that angular does a lot of unsafe things, and I learned about the ngCsp directive.
So now I have :
<html ng-app="app" ng-csp>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://foo.com>
<script src="lib/onsen-1.3.10/js/angular/angular.js"></script>
<script src="lib/onsen-1.3.10/js/onsenui.js"></script>
...
</html>
I don't get anymore CSP's errors about angular.js, but I keep getting some for onsenui.js (unsafe-inlines and unsafe-evals).
For know, the only solution I've found is :
to allow unsafe-inline in CSP
to arrange the only line in onsenui.js that causes an unsafe-eval :
In onsenui.js, I've replaced line 4888 :
}(new Function("return this")()));
by :
}(function() {return this;}()));
So my question is : am I the only one out there having this problem ? Does someone here is using cordova, onsenui, and CSP without any problem ?
I'd rather not put 'unsafe-eval' in the CSP meta, and I'd like to remove the 'unsafe-inline'.
Sorry for this long post, and thank you for your help ! ;)
Related
I can't seem to get the thumbnails I have placed on this page to open in the lightbox:
http://prussellartist.com/custom-leather-dog-collar-gallery2.htm
I tried changing the order and placement of these 2 elements:
<link rel="stylesheet" href="dist/css/lightbox.css">
<script src="dist/js/lightbox.js"></script>
At a glance is there anything wrong?
Please take a look at the JavaScript errors ... It seems like you forgot the fourth step of the getting-started guide (http://lokeshdhakar.com/projects/lightbox2/#getting-started) - namely - to include jQuery.
I'm working on a Cordova application with Angular and I'm struggeling on something for Windows.
I'm trying something like this:
<img ng-src="{{dataDirectory + buildingPhoto.FilenamePhoto}}" class="full-width">
dataDirectory = "ms-appdata:///local"
buildingPhoto.FilenamePhoto = "VOL-00122kaftfoto_thumb.png"
But this only results in a broken image with this code:
<img class="full-width" src="unsafe:ms-appdata:///local/VOL-00122kaftfoto_thumb.png" ng-src="ms-appdata:///local/VOL-00122kaftfoto_thumb.png">
I figured the unsafe means the prefix is seen as insecure and it needs to be whitelisted, thus I added this in my app.js:
.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|ghttps?|ms-appx|ms-appdata|x-wmapp0):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|ms-appx|ms-appdata|x-wmapp0):|data:image\//);
}])
I also added this meta tag inside my index.html:
<meta http-equiv="Content-Security-Policy" content="ms-appdata *; default-src *; img-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'" />
But it's not working, so I'm kinda stuck here and hope somebody can push me in the right direction.
Image src whitelisting using the following code fixes the issue:
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|content|blob|ms-appx|ms-appdata|x-wmapp0|unsafe|local):|data:image\//);
Also ensure that $compileProvider is not getting overridden anywhere else after the initial setting in app.js which actually resulted in the issue for Joris.
After searching for days I finally found the solution to my problem.
Everything I was doing was correct. The only problem was that I was applying all of this in my app.js, while in my router.js everything got overridden by different code.
Lesson: always check if the angular app has configurations in other files before applying a patch
This is the best solution.
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|chrome-extension|ms-appx-web|ms-appx):|data:image\//);
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|chrome-extension|ms-appx-web|ms-appx):/);
}]);
I'm new to MVCs and Angular and I tried to get angular-google-maps going by following the steps in the AGM QuickStart page. Firebug shows several errors, some of which I don't understand.
First, I get a 403 in accessing underscore. The message (minus localhost) is:
"NetworkError: 403 Forbidden - angular-oPast/app/..../node_modules/underscore/underscore-min.js" Why can't I access code that's in my own PC?
Second, I get SyntaxError: missing } after property list }; with some reference to ngLocale, which is not in my code.
Third, I get ReferenceError: _ is not defined with some reference to MarkerLabel, which I am not using.
Fourth, I get [$injector:nomod] Module 'residenceApp' is not available! This is the name of the overall Angular app. Despite having done a couple tutorials, I don't know how to build this for using AGM or where to put it.
Fifth, per the AGM QuickStart, I have the following in my CSS
.angular-google-map-container {height:400px;}
This is a puzzle because the instructions say nothing about creating an HTML class=".angular-google-map-container" I did not put an HTML class attribute in like that because there were no instructions to do that. What is that CSS doing, and is it correct for my situation?
My HTML using ng looks like:
<html lang="en" data-ng-app="residenceApp">
<div id="gMapCanvas" data-ng-controller="GMapController2">
<google-map center="map.center" zoom="map.zoom"></google-map>
</div>
Most of the rest of the HTML is mock up text, at this point.
My scripts look like:
<script src="..../node_modules/underscore/underscore-min.js"></script>
<script src="common/gmapGenerator2.js"></script>
<script src="common/mapGenerator/dist/angular-google-maps.min.js"></script>
Maybe I should say that example.html for AGM works in my PC. So I have the necessary code in the system. It just doesn't have dependencies set right, or something.
What do I need to do to fix these problems and get Google Maps working? I can provide more info, if necessary.
Does anybody can provide an answer to such issue? I`m trying to put some vector graphics into HTML. Actually it is not necessary in mine case, so I probably would resort to simple image for now, but I as encountered a problem, I couldn't resolve, it's became very interesting and relevant to the future to define what is going wrong. VML is absolutely new to me, by the way.
I tried to insert several vml-elements into a page, and some of them worked perfectly (in IE6, IE7) namely "oval", "rect". But when I've attempted to insert a shape or roundrect everything went wrong.
Actual question is: is there satisfactory VML support in IE6, IE7 or what I'm doing wrong? But as far as I'd examined my code everything is right in it. Below I'll put a sample, so everyone could test this in IE-browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>sample</title>
<style>
v\:* { behavior: url(#default#VML); display:inline-block}
#div1 {
width:400px;
height:400px;
background-color:#e4fe56;
}
</style>
</head>
<body>
<div id="div1">
<v:shape style='width:100px;height:100px' fillcolor="red" path="m 0,0 l 30,0,30,30 xe" />
<v:rect style='width:100pt;height:75pt' fillcolor="blue" strokecolor="red" strokeweight="3.5pt"/>
<v:roundrect style='width:100pt;height:75pt" arcsize="0.3" fillcolor="yellow" strokecolor="red" strokeweight="2pt"/>
</div>
</body>
</html>
Additionally I found that it happens only in strict mode. When DOCTYPE removed or with other conditions when IE works in quirks mode everything works well.
You have mismatched quotes on your style attribute
<v:roundrect style='width:100pt;height:75pt"
You have whitespace in your doctype:
/xhtml1 /
I've been fiddling with a partial trust XBAP - how can I change the icon shown in the IE-tab and the title (aside from changing the assembly-name in the project properties)?
I would also like to change what is shown in the Internet header (right now it shows the address of the XBAP.
I had a similar issue where I could not change the title in IE 10 (this was the first stack overflow answer that comes up when you Google "xbap title"). I found the solution here:
In code, set Application.Current.MainWindow.Title to the title you want to show. This worked for me, hopefully this will be helpful for the next guy.
Load your XBAP from a HTML page using an IFRAME. In the HTML page add a title and icon.
Something like this:
<html>
<head>
<title>This is my title</title>
<link rel="shortcut icon" href="http://wherever.com/icon.ico">
</head>
<body>
<iframe location="something.xbap"
style="width:100%; height:100%; border:0; overflow:auto" scrolling="no"></iframe>
</body>
</html>
This is simplified from code that I actually use, except due to some other requirements I'm giving the iframe an id and setting its location using JavaScript in the body's onload event. I assume the above will work just as well.