Error: [$sce:insecurl] - angularjs

I'm creating a Map widget in ServiceNow and am running into an Error: [$sce:insecurl].
My HTML:
<div class="fluidMedia">
<iframe ng-src="{{data.src}}" class="media"></iframe>
</div>
Server Script:
var gr = new GlideRecord('cmn_location');
gr.addQuery('sys_id', gs.getUser().getLocation());
gr.query();
if(gr.next())
{
var loc = gr.street.getHTMLValue();
}
loc1 = loc.replace(/,/g, "");
loc2 = loc1.replace(/ /g, "+");
data.src = "https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q=" + loc2;
Client Controller:
function($scope,$sce) {
var c= this;
c.server.get({name: "test"}).then(function(r) {
c.data.src = $sce.trustAsResourceUrl(r.data.src);
});
}
Has anyone encountered this? How do I change the angular js to accommodate for this? Sorry if this is a silly question, I'm brand new to angular js.
Thanks!

Try to add this url to the whitelist of urls via $sceDelegateProvider. Also read this for more details.

Related

Media.net ads integration with SPA(angularjs)

How to integrate media.net ads in SPA(angularjs) website. I have copied and posted the given code in my website but it is not working(http://test.website.paperboy.com/).
<script id="mNCC" language="javascript">
medianet_width = "728";
medianet_height = "90";
medianet_crid = "xyz";
medianet_versionId = "xyz";
</script>
<script src="//contextual.media.net/nmedianet.js?cid=xyz"></script>
But it is working for non angular static site(https://test.website.paperboy.com/mobile-view.html).
I cannot speak for angularjs, but Angular 2 and beyond scrubs out script tags. Here is the solution for Angular 8. Note this is for the asynchronous ad code, not the synchronous code posted, but the methodology should be the same in which we are adding a DOM element:
.ts file:
convertToScript() {
var element = this.script.nativeElement;
var script = document.createElement('script');
script.id = 'mNCC';
script.lang = this.language ? this.language : 'javascript';
script.type = this.type ? this.type : 'text/javascript';
script.innerHTML = `
try {
window._mNHandle.queue.push(function (){
window._mNDetails.loadTag(${this.advertisement});
});
}
catch (error) {}`;
script['data-cfasync'] = 'false';
const parent = element.parentElement;
parent.parentElement.replaceChild(script, parent);
}
ngAfterViewInit() {
this.convertToScript();
}
.html file:
<div #script style.display="none">
<ng-content></ng-content>
</div>
Add the component where you want (inject the advertisement size and id here)
<div id="616415456">
<app-media-net-ad [type]="'text/javascript'" [advertisement]="advertisement">
</app-media-net-ad>
</div>
The advertisement variable should be formated as "ad_id,ad_size,ad_id". The header code can be added into the header section of your index.html file.

Social Login with protractor

I'm trying to login in my app with google and protractor. I can't find the error. It seems that a element is not present but the element is working fine in the test. Please help me with this.
Here is the test's code
browser.getAllWindowHandles().then(function (handles) {
var popupHandle = handles[1];
browser.switchTo().window(popupHandle);
var email = browser.driver.findElement(by.name('Email'));
var signIn = browser.driver.findElement(by.name('signIn'));
email.sendKeys(browser.params.login.user || process.env.GOOGLE_USER);
signIn.click();
browser.driver.sleep(2000);
var password = browser.driver.findElement(by.name('Passwd'));
password.sendKeys(browser.params.login.password || process.env.GOOGLE_PASS);
var login = browser.driver.findElement(by.css('.rc-button'));
login.click();
browser.driver.sleep(10000);
browser.driver.switchTo().window(handles[0]);
});
and here is the error
16:30:05.655 INFO - Done: [find element: By.cssSelector: *[name="signIn"]]
16:30:05.659 INFO - Executing: [click: 3 [[ChromeDriver: chrome on LINUX (e0625e8b3f72a0f40228f4f4e90c2c9d)] -> css selector: *[name="signIn"]]])
16:30:05.945 WARN - Exception thrown
org.openqa.selenium.ElementNotVisibleException: element not visible
I don't know if there is a workaround to do this but I can't find a solution in order to login with protractor. Please help
May be your sign-in button is enabled only after your email is validated. You should do something like below
var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(signIn,5000).then(function() { signIn.click()}):       
     
Thank you... I've tried that but it doesn't work... What really worked for me was put the login code into the onPrepare function in the config file.
Like this.
onPrepare: function() {
var site = browser.params.site;
browser.get(site);
element(by.css('.btn-crearseguro-nav')).click();
element(by.id('gm')).click();
//Sign in with to popup
browser.getAllWindowHandles().then(function (handles) {
var popupHandle = handles[1];
browser.switchTo().window(popupHandle);
var email = browser.driver.findElement(by.name('Email'));
var signIn = browser.driver.findElement(by.name('signIn'));
email.sendKeys(browser.params.login.user || process.env.GOOGLE_USER);
signIn.click();
browser.driver.sleep(10000);
var password = browser.driver.findElement(by.name('Passwd'));
password.sendKeys(browser.params.login.password || process.env.GOOGLE_PASS);
var login = browser.driver.findElement(by.id('signIn'));
login.click();
browser.driver.sleep(5000);
browser.driver.switchTo().window(handles[0]);
});
},
And it work's fine... But thanks for yout comment... Sure I will use it in another test (y)

Angular - update services object during asynchronous function

Folks: Creating an app in angular and node webkit - where users queue up files for downloading, navigate to their dashboard view and this initiates the downloads.
I've created a service which holds an object of the files data:
..
var downloadObj = {};
// fileObj = {'name':'The file name'; 'download_progress' : dlProgress}
showcaseFactory.myDownloads = function(eventId, fileObj) {
if(eventId){
console.log('update the object');
downloadObj['event_'+eventId] = fileObj;
}
console.log(downloadObj);
};
showcaseFactory.getDownloads = function() {
return downloadObj;
};
..
When the dashboard view loads - ng-repeat loops over $scope.downloadFiles which references this object returning the data.
<div ng-repeat="file in downloadFiles">
<div><span>{{file.name}}</span> [{{file.download_progress}}%]</div>
</div>
I've created a custom module which utilises node_modules to perform the download of the files:
nwjsDownloadFactory.commenceDownload = function(event_id, url, dest, cb) {
var http = require('http');
var fs = require('fs');
var statusBar = require('status-bar');
var path = require('path');
// THIS UPDATES THE OBJECT AND DISPLAYS FINE --------- >>
var id = 7;
var testFileObj = {
'name' : 'This is the file name prior to the download...',
'download_progress' : 10
};
ShowCase.myDownloads(id, testFileObj);
// <<< THIS UPDATES THE OBJECT AND DISPLAYS FINE ---------
var file = fs.createWriteStream(dest);
var request = http.get(url, function(response) {
response.pipe(file);
file.on('finish', function() {
file.close(cb); // close() is async, call cb after close completes.
});
bar = statusBar.create({ total: response.headers['content-length'] })
.on('render', function (stats) {
// var percentage = this.format.percentage(stats.percentage);
// console.log(event_id + '....' + percentage);
var id = 7;
var testFileObj = {
'name' : 'This is the new file name during the download...',
'download_progress' : 35 // this will be replaced with percentage
};
ShowCase.myDownloads(id, testFileObj);
});
response.pipe(bar);
}).on('error', function(err) { // Handle errors
fs.unlink(dest); // Delete the file async. (But we don't check the result)
if (cb) cb(err.message);
});
}
QUESTION: Prior to the line var request = http.get(url, function(response) the object gets updated, and the changes are reflected in the UI. However, I need to constantly update the object with download complete % so I can create a progress bar.. However, as this asynchronous function executes, the object
appears to be updating - see the attached screen shot - but the UI is not reflecting this.
Can somebody please steer me in the right direction - I need the object to update during the function bar = statusBar.create({ and for the changes to reflect in the UI..
Call $scope.$apply() after making changes to your model to notify Angular that it has to update the UI.
showcaseFactory.myDownloads = function(eventId, fileObj) {
if(eventId){
console.log('update the object');
downloadObj['event_'+eventId] = fileObj;
$scope.$apply();
}
console.log(downloadObj);
};
If you use Angular's $http object, this is handled automatically for you, but if you update your model from other asynchronous callbacks, you have to take care of it yourself.
See this blog post and this documentation page for more in-depth explanations about what's going on.

Why won't this code work to create a Parse object in an Ionic app?

I'm trying to create a Parse object in an app using the Ionic Framework, and I can't get it to work. I'm fairly new to programming, but I've been able to create Parse users, just not objects. Can anyone help me find a solution? Please see the code below for my controller in question. Thanks!
.controller('AddProspectsController', function($scope, $state, $rootScope) {
if (!$rootScope.isLoggedIn) {
$state.go('welcome');
}
$scope.prospect = {};
$scope.error = {};
// Syntax to create a new subclass of Parse.Object.
//var Prospects = Parse.Object.extend("Prospects");
$scope.addProspect = function() {
// Create a new instance of that class.
var Prospects = Parse.Objext.extend("Prospects");
var prospects = new Prospects();
prospect.set("name", $scope.prospect.name);
prospect.set("phone", $scope.prospect.phone);
prospect.set("email", $scope.prospect.email);
prospect.set("interest", $scope.prospet.interest);
prospect.save(null, {
success: function(prospect) {
// Execute any logic that should take place after the object is saved.
$state.go('app.prospects', {clear: true});
alert('New object created with objectId: ' + prospect.id);
},
error: function(prospect, error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and message.
alert('Failed to create new object, with error code: ' + error.prospect);
}
});
}
})
You have another spelling error on this line:
var Prospects = Parse.Objext.extend("Prospects");
This is not Objext, but Object.​​​​​​
I hope this will help.
There is a spelling error... you have the variable named prospects with an "s" and when you are creating the object, you are using a variable named prospect

emails from gmail but response is gmail.readonly

I am trying to get the emails from gmail using https://www.googleapis.com/auth/gmail.readonly/?access_token='fdrt654vfdgfe6545But in response I am getting gmail.readonlyBut the System.HttpResponse[Status=OK, StatusCode=200] is fine. Can any guide me is there anything I am missing out.
This I how I requested got auth but in the response I received access token
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
var AuthStates = {google: null};
function signinCallback(authResult) {
if (authResult['status']['signed_in']) {
// Update the app to reflect a signed in user
// Hide the sign-in button now that the user is authorized, for example:
document.getElementById('signinButton').setAttribute('style', 'display: none');
//alert(authResult['code']);
console.log('code state: ' + authResult['code']);
//console.log('authResult : ' + authResult[]);
AuthStates.google = authResult;
console.log('authResult 1 : ' + authResult['status']['method']);
console.log('auth Result : ' + authResult['id_token']);
//{!access_token} = authResult['access_token'];
//{!code} = authResult['code'];
connection(authResult['access_token'], authResult['code']);
} else {
// Update the app to reflect a signed out user
// Possible error values:
// "user_signed_out" - User is signed-out
// "access_denied" - User denied access to your app
// "immediate_failed" - Could not automatically log in the user
console.log('Sign-in state: ' + authResult['error']);
}
}
</script>
<apex:outputPanel >
<span id="signinButton">
<span
class="g-signin"
data-callback="signinCallback"
data-clientid="clientid"
data-cookiepolicy="single_host_origin"
data-scope="https://www.googleapis.com/auth/gmail.readonly"
data-response_type="code"
data-redirect_uri="http://test-on.ap1.visual.force.com/apex/Gmail_inbox">
</span>
</span>
<apex:form >
So as i got my access token from my request I can go directly for getting all information related to the logedin user. As I am getting all the information regarding the user I am trying to get all the emails related to him. Is I am doing right or I am wrong any place. I am very new with api and web service trying to learn. please do help me put out.
You're actually making an HTTP GET call to that URL ( https://www.googleapis.com/auth/gmail.readonly/?access_token= ...)? Isn't that just the auth scope identifier?
Once you have a valid Oauth2 token you can set in the Auth header then you can make HTTP requests to the API. For example, to list messages see:
https://developers.google.com/gmail/api/v1/reference/users/messages/list
That has the URL to access (GET https://www.googleapis.com/gmail/v1/users/me/messages ) then once you have the message IDs you can get the messages individually following: https://developers.google.com/gmail/api/v1/reference/users/messages/get (e.g. GET https://www.googleapis.com/gmail/v1/users/me/messages/ ).
Usually there are good client libraries for the Google APIs. Not sure if that works for you, but see, for example:
https://developers.google.com/gmail/api/downloads

Resources