lightbox2 unsafe data image - javascript

I am trying to use lightbox2 with a data URL which is dymacilly set by Angularjs but for some reason it's not showing the image. In my console I get an error showing the data URL I set dynamically with ng-href but "unsafe" is prefixed to the url.
Anybody has a clue why this happens? I already added "data" to the white list of Angular and I also see that in the DOM the href is correct.
config(['$compileProvider',
function ($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|local|data):/);
}]);
There is no "unsafe" prefixed only when I click on the link I get this error.
The error that I get in the console looks like this:
unsafe:data:image/png;base64,net:{the base 64 string}:ERR_UNKNOWN_URL_SCHEME
My link looks like this:
<a ng-href="data:image/png;base64,{{schedule.flyer}}" data-lightbox="image-1" data-title="My caption" >
If I add the base64 string directly in a normal href it works fine. Does anybody know how to get this to work?

I think that you should use the aHrefSanitizationWhitelist method per https://docs.angularjs.org/api/ng/provider/$compileProvider

The problem was that I configured the wrong white list. I should have used the following code:
config(['$compileProvider',
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|local|data):/);
}]);

Related

Object tag value set in HTML page with Angular JS model not working in Microsoft Edge browser

I have a HTML like following;
<div class="tab-content">
<div ng-repeat = "(key,val) in reportCollection" id="{{val.url}}" class="tab-pane fade in" ng-class="{'active': $index == 0}" repeat-done="layoutDone()">
<object data="{{val.url}}/index.php" style="width:100%;height:80%;"></object>
</div>
</div>
Now via a controller I am updating a model "reportCollection" after an ajax call,
$http.get("ajax_config.php")
.then(function(response) {
$scope.reportCollection = response.data;
});
In Chrome and Firefox soon after updating model different http request is being sent for different object tag inside ng-repeat(I checked from developer console and network tab). So everything is fine.
But in Edge different ajax call is being occurred but the ajax call path is val.url not the actual urls inside the collection.
As for example lets say my collection is;
var reportCollection = [
{'url':'test.html',....},
{'url':'myPage.html',....}
]
Now http request url in chrome and firefox as;
http://.../.../.../test.html
http://.../.../.../mtPage.html
But in edge it is like;
http://.../.../.../%7B%7Bval.url%7D%7D/
So clearly it is taking as {{val.url}} as URL.
Can you please give me a detail insight about why is this happening and how to resolve it?
I believe this issue is covered in this post: angularjs expression in html tag
Basically, Edge is evaluating the data attribute before angular has a chance to replace the val.url property. Try using the accepted answer on the link above.
Try, to make it this way:
<object data="{{val.url+'/index.php'}}" ....>
Or:
<object ng-attr-data="{{....}}" >

AngularJS binding in 'src' attribute of <img> tag

I have a table with many rows and each row has a preview image to be shown on the top right corner when mouse is hovering the row.
This is how I put the image tag with AngularJS binding for URL in src attribute:
<img src="{{imageUrl}}"/>
But there is the following error in console:
GET http://localhost/#/imageUrl 404 (Not Found)
How to get rid of this error in browser console?
Angular has its own directive for img, called ng-src:
<img ng-src="{{imageUrl}}"/>
You need to use ng-src instead of src in your <img> tag.
The documentation says like this,
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
https://docs.angularjs.org/api/ng/directive/ngSrc
Hope this helps!

View onclick data via Chrome Extension

I want to pull the onclick information from an a tag. I know how to do this normally and I've confirmed it works via the console. However, it returns null when attempted through an extension. Is this possible via an extension and if so: what strange method must be employed?
Example:
On the page: text
I'd like to be able to grab that something(stuff,otherstuff).
However, pure JS didn't work: String(document.getElementsByTagName("a")[10].onclick)
And neither did jQuery: String($(".tableclass").find("tbody").find("a")[10].onclick)
Both of the above working when entered into the console.
First of all, you can never read the onclick property that was set by a page because extension code runs in an isolated scope.
Secondly, even if the code was not isolated, the onclick property of <a onclick="foo"></a> may not have the value foo you are expecting. That is because a property is not the same thing as an HTML attribute.
Therefore, if you want to access the string value of an onclick attribute you can and should use linkElement.getAttribute('onclick'); instead.
Is this what you mean, that you want to change a href of the link? You can do it like this:
html:
<a href='foo' class='link-to-swap'>link</a>
javascript:
$(document).ready(function(){
$('.link-to-swap').click(function(e){
e.preventDefault();
var grabbedData = $(this).attr('data-id')
$(this).attr('href',grabbedData)
return false
})
})
here is the fiddle:
https://jsfiddle.net/cp6x9pf5/1/

Reload Div Section Only

I don't know if what I am trying to do is possible so I will explain the whole scenario and what I am attempting to do that way if there is a better way you bright people can let me know!
Here is the scenario, I have a view and a PartialView. In the PartialView I have a dropdown list that gets populated via javascript from in the View. This works fine, in the PartialView I have a div that calls a Controller to return results based on a value in the Model passed to it. What I need are the results to be based on the value from the Model AND the dropdown list. Here is the code that works just based on the model value and a hardcoded loc which is what I want to get from the dropdown.
<div id="catalogue-view-action-view-ct" class="async-partial" data-url='#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=6&AsyncUpdateID=catalogue-view'>
#if (noJs)
{
<span>
#{ Html.RenderAction("ItemsActionViewPartial", "Catalogue_Items", new { id = Model.CatalogueItemID, location = 6, AsyncUpdateID = "catalogue-view-action-view-ct" }); }
</span>
}
else
{
<img src="#Url.Content("~/assets/images/busy.gif")" /><span> Loading...</span>
}
</div>
This div in the PartialView works great, in the View I have been able to set the data-url attribute no problem with javascript but the page is already loaded so it doesn't update. Is there a way to "refresh" or "reload" just a div not the whole PartialView? If I do the whole PartialView I am just back in the same situation with the html being loaded before the javascript sets the data-url attribute. Here is the javascript in the view:
var myDiv = document.getElementById('catalogue-view-action-view-ct');
url = '~/Catalogue_Items/ItemsActionViewPartial/20144?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct';
myDiv.setAttribute('data-url', url);
$('#catalogue-view-action-view-ct').load(url);
Any help would be greatly appreciated.
UPDATE:
When using a relative path as I do above the data-url gets set properly but the load path is incorrect because it is appended. This is what happens:
data-url="~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct"
This is perfect, exactly what I need, but the path loaded is:
http://www.example.com/catalogue-items/20144/myItem~/Catalogue_Items/ItemsActionViewPartial/20144?loc=40&AsyncUpdateID=catalogue-view-action-view-ct
The relative path get added to the end of my current location, I can fix this except I need to remove the "/myItem" portion as that is a parameter for the view that I don't want in the url. When I use an absolute path I get a cross-origin error. Any suggestions?
With the help of a few comments I was able to find a solution for my issue!
With using $('#catalogue-view-action-view-ct').load(url); there was actually no need to set the data-url.
But in order to have the relative path work properly I needed to surround it with url.content like so:
$('#catalogue-view-action-view-ct').load('#Url.Content("~/Catalogue_Items/ItemsActionViewPartial/")#Model.CatalogueItemID?loc=' + $('#LocationID').val() + '&AsyncUpdateID=catalogue-view-action-view-ct');
loading this value produced the desired results. Thanks #Lal for leading me in the right direction!

Is there anyway to stop CKEditor 4 from filtering my anchor tag attributes?

CKEditor 4 attribute filtering is stripping any occurrence "href" from anchor tags put into the editor. I have a plugin which creates links that contain some "custom" attributes. A link looks something like this:
Some Link
The CKEditor returns the link in this form when I call getData():
<a href="#" document->Some Link</a>
Is there a way to instruct CKEditor to stop filtering link attributes? Does anyone happen to know where in the source this regex is so I can fix it?
Thanks!
I've just checked this link on CKEditor 4.1 - the output is:
<p>Some Link</p>
Since 4.1 the document-href is stripped because it is now allowed in the editor. You have to add an Advanced Content Filter rule - e.g.:
config.extraAllowedContent = 'a[!href,document-href]';
And then it would work in 4.1. Before 4.1 it should work by default, without setting anything.
However there's a bug in CKEditor's HTML parser. It does not parse correctly sth-href attributes on links so a result is a sth- attribute.
For now I advice you to change the name of this attribute to data-url or whatever else without href ending.
I created a ticket: https://dev.ckeditor.com/ticket/10298
try setting this in config file.
config.allowedContent = true;
also if its getting filtered on insert then you can try this:
//var yourAnchor = 'Some Link';
editor.insertHtml(yourAnchor, 'unfiltered_html');

Categories