This question already has answers here:
unsafe link in angular
(5 answers)
Closed 7 years ago.
I have a small AngularJS app where I am trying to open an uploaded image and am running into the issue where angular adds "unsafe:" at the beginning of the URL. I have added the following line in my app config to sanitize the URL, but it is not working for me:
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob:chrome-extension):|data:image|\//);
I am using Angular v1.3.0 so I am using the correct property name. I am using Chrome mostly, but I have the same issue in other browsers. Also, the beginning of my image looks like this:
unsafe:data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...
Any idea what am I missing in my regex?
Thanks in advance!
If you $compileProvider.imgSrcSanitizationWhitelist() without the regexp parameter it returns the currently defined regexp .
Running this code on an empty angular 1.3.0:
app.config(function ($compileProvider) {
console.log($compileProvider.imgSrcSanitizationWhitelist()); //
});
I got this result - /^\s*((https?|ftp|file|blob):|data:image\/)/
And the base64 encoded JPEG using the basic <img ng-src="{{main.src}}"> actually works as you can see here, and another one with a png. Also look at the console to see the regexp.
Another test I've run is to move the data:image/jpeg;base64, out of the scope binded string and put it the ng-src:
<img ng-src="data:image/jpeg;base64,{{main.src}}">
As you can see it worked as well.
To make a long story short - you don't need to define a regexp in 1.3.0 and above for data:image/*, as it's defined by default.
I can't be sure what's the problem, but maybe you've got another definition of
imgSrcSanitizationWhitelist somewhere in your code or the data uri is broken somehow.
Related
This question already has answers here:
Why pass parameters to CSS and JavaScript link files like src="../cnt.js?ver=4.0"?
(9 answers)
Closed 3 months ago.
What is "?_=3.5-SNAPSHOT-Dev" mean after ".js"? I do some research on google but no idea what it mean and what it use for
<script type="text/javascript" src="js/jquery-3.5.1.js?_=3.5-SNAPSHOT-Dev"></script>
It depends on the server that's serving your Javascript. Generally, variables like those on JS files are used for cache busting. I think in your example, 3.5-SNAPSHOT-Dev could be a release tag. If this JS file is now on your own machine, you can safely discard the ? and anything after that. If you're getting this from another server somewhere, seek out documentation about that server to see what they use the _ variable for.
This question already has answers here:
Why do you see colons while calling a javascript function in html sometimes? [duplicate]
(3 answers)
When is the 'javascript:' prefix valid syntax?
(4 answers)
What's the point of "javascript:" in code (not URLs)? [duplicate]
(4 answers)
Closed last year.
In an old piece of legacy code I found the following onclick event:
onclick="javascript:bSubmitted=true;"
Does anyone know what the javascript: label in front of this code does? I have never seen this notation before, and as far as I know whatever is in the onclick event is always javascript. Removing it, or changing it to something else doesn't seem to have an effect and IntelliJ seems to think it's an 'unnecessary label'.
Just out of curiousity I still would like to know what it does and what it can be used for. Does anyone know?
I think you can find your answer here (it's the only "official" source I've found that talks about this): HTML Standard.
Taken from 7.8.1 Navigating across documents
If resource is a request whose url's scheme is "javascript" Queue a
task, on the DOM manipulation task source and associated with the
active document of browsingContext, to run these steps:
Let response be the result of executing a javascript: URL request
given resource, the source browsing context, and browsingContext. Run
process a navigate response with resource, response, navigationType,
the source browsing context, browsingContext,
incumbentNavigationOrigin, and activeDocumentNavigationOrigin.
Basically, the javascript: can be used as an url scheme which (just for adding something to the boilerplate) was and still is used for many XSS injections.
In that case specifically (upon a click event) it sounds unnecessary indeed, while it could be useful on an href, as you may see here (fiddle linked because the StackOverflow snippet manager doesn't allow alerts on javascript:): https://jsfiddle.net/73rmzjgw/
When any changes perform into form then javascript checks that, any changes is there or not. if it has any then it alerts the user before they navigate away from the page.
This action can be disabled on a submit button click by adding
onclick="javascript:bSubmitted=true;"
to its tag.
This question already has answers here:
angularjs 1.6.0 (latest now) routes not working
(5 answers)
Closed 6 years ago.
Recently I have noticed that when using ngRoute module in an AngularJS app, the route contains #! in the URL, which was earlier just the #.
For example, www.webiste.com/#/login becomes www.website.com/#!/login
I have to enable the html5Mode and also disable the requireBase which removes the base as a whole using the code,
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
and the URL changes to www.website.com/login which works fine but is misleading and is not what Angular SPA URLs look like.
If I do not enable the html5Mode, the URL is encoded and I cannot get around it. So www.website.com/#/login becomes www.website.com/#!/#%2Flogin (Notice the later / is encoded as %2F).
Is this a change implemented by the developers for some specific purpose? What difference does it make? What changes do I need to make to my app to keep it working? Am I doing something wrong?
Github issue: https://github.com/angular/angular.js/issues/15547
It's called the hash bang.
For a while Twitter was using the same thing. It allows for AJAX calls and let search engines know your path without using a "real" path. It's considered obsolete though.
https://developers.google.com/webmasters/ajax-crawling/docs/getting-started
There is another stackoverflow answer about that:
Doing links like Twitter, Hash-Bang #! URL's
Update:
One of the reasons for not having a need for the hash bang anymore is that we can push the history state without a page reload. Something so called "one page" websites, like React, do.
This question already has answers here:
Android WebView always returns null for javascript getElementById on loadUrl
(3 answers)
Closed 5 years ago.
We have an app that uses a form for oauth, just for dev purposes I want to eliminate typing in the user name and password so I added some code like this for when the page finishes loading:
mWebView.loadUrl("javascript:document.getElementById('UserName').value='" + txtUser.getText()+"'");
But for some reason it doesn't fill in the form it makes a new page and just writes out the value of txtUser instead of filling in the input field? Why and how can I fix this?
If you look at a tool look Squirt it does an anonymous function call. So I am not that versed in javascript, but that anonymous call seems to be the key in that the browser sees it as the current page is making the call itself. So try this roughly:
mWebView.loadUrl("javascript:(function(){document.getElementById('UserName').value='" + txtUser.getText()+"';})()");
I faced a similar issue and since I couldn't find a proper solution, I used the following hack -
Fetch the html source text.
Replace </body> tag with </body><script>YOUR JS CODE</script>
webview.loadDataWithBaseURL(url, editedString, "text/html", "UTF-8", null);
Sorry for the hacky solution, but in case you can't find a solution, this could help :)
This question already has answers here:
AngularJS: How to make angular load script inside ng-include?
(9 answers)
Closed 8 years ago.
When I paste any <script> into my angular view, it fails silently and does not load the script.
I'm trying to embed a Saucelabs video into my AngularJS project. (Documentation, example script)
<script src="https://saucelabs.com/video-embed/<jobId>.js?auth=<authToken>"></script>
However, pasting <script>alert('test')</script> into my view doesn't appear to work either, so I'm thinking this is default behaviour of Angular.
Clearly, logic doesn't really belong in the view, so generally I don't need to include any <script>s here, but in this case, I don't really see an alternative.
Any ideas?
Here is a hack I am using for loading scripts in the controller.
Btw, I put in into resolve of the view/state to wait till script loads.
$http.get('http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU').then(function(data){
window.eval(data);
deffered.resolve() // because I'm using it in the resolve part
});
Specify your own URL and thats works.
Another option could be using RequireJS, but I've not used it.