Why am I receiving a CSP Error in my Google Apps Script File? - angularjs

I'm having an issue with my Google Apps Script file. Its essentially mirroring a Room Reservation system and up until recently it started to have some issues. I'm having a Content Security Policy issue that shows when I try to run it on FireFox.
When I go on Chrome, I get a different error:
I have an Admin Console, that gives me the option to accept or decline Room Reservations. Currently, the only account that shows any of the Rooms is mine.
The intended look should be this, with the rooms shown below:
However, what other Admins are seeing is this:
It shows no CSS, and I get either one of the errors above.
Currently, on my Admin Console Script, I have this, which is where the issues come about:
<!DOCTYPE HTML>
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
<html ng-app="directoryApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<div ng-controller="directoryCtrl" class="container-fluid" ng-init="getEvents(<?= user ?>)">
<!-- Show loading screen -->
<?!= HtmlService.createHtmlOutputFromFile('Loading').getContent(); ?>
<?!= HtmlService.createHtmlOutputFromFile('License').getContent(); ?>
<!-- Show notifications -->
<div id="page_top" class="notify lead" ng-if="notification">{{notification}}</div>
<div class="row">
<div class="col-xs-12">
<div ng-show="events" ng-csp>
<?!= HtmlService.createHtmlOutputFromFile('AC-Navigation').getContent(); ?>
</div>
<div ng-show="events.length && !editing && !settings">
<?!= HtmlService.createHtmlOutputFromFile('AC-List').getContent(); ?>
</div>
<div class="col-xs-10 col-xs-offset-1" ng-show="editing">
<?!= HtmlService.createHtmlOutputFromFile('AC-Single').getContent(); ?>
</div>
<div class="col-xs-6 col-xs-offset-3" ng-show="settings">
<?!= HtmlService.createHtmlOutputFromFile('AC-Settings').getContent(); ?>
</div>
</div>
</div>
</div>
</body>
</html>
<?!= HtmlService.createHtmlOutputFromFile('AC-JavaScript').getContent(); ?>
I tried to look at some Angular Documentation, that spoke about using ng-csp, which didn't work.
There is no issue with the actual reservation system itself, its just that I cannot see the rest of the code on the Admin Console, and as a result I cannot accept/deny room requests on my app.
I tried to also use a meta that allows for everything through Content-Security-Policy.
Any guidance would be appreciated!

Related

Angular JS translate not working properly inside Visualforce page

I need to translate my HTML into different languages based on user preference. For that, I am using Angular JS translate method. The example when I write inside notepad and saved as ".html" is working fine. But when I pasted the same code inside my Salesforce Visualforce page, its behavior changes.ie. When I click on the button"IT" to translate the content to "Italics" the contents are translating to Italics but within seconds the contents are again going back to their preferred language "EN". I have given below my screenshot of output.
I have given below my code, can anyone say what's wrong in this.
<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.2/angular-translate.js"></script>
<script>
// Code goes here
var app = angular.module('app', ['pascalprecht.translate']);
app.config(['$translateProvider',
function($translateProvider) {
$translateProvider.translations('it', {
'Purchase order': "Ordine di acquisto ",
'Number:': "Numero:",
'Customer data': "Dati Cliente",
'Surname / Company':"Cognome/Società",
'Name':"Nome",
'Piazza way':"Via/Piazza",
'City':"Città",
'VAT tax code':"Codice Fiscale/Partita IVA",
'Phone':"Telefono",
'E-Mail':"E-Mail",
'CAP':"CAP"
});
$translateProvider.preferredLanguage("en");
}
]);
app.controller('AppController', function ($translate) {
// this.browser = navigator.userAgent;
this.useLang = function (lang) {
$translate.use(lang);
}
});
</script>
<div ng-controller="AppController as app">
<h3 translate> Purchase order </h3>
<p translate>Number:</p>
<h3 translate>Customer data</h3>
<p><span translate>Surname / Company</span>_________</p>
<p> <span translate>Name</span>__________</p>
<p><span translate>Piazza way</span>____________</p>
<p><span translate>CAP</span>_______<span translate>City</span>______</p>
<p><span translate>VAT tax code</span>__________</p>
<p><span translate>Phone</span>____________</p>
<p><span translate>E-Mail</span>_________</p>
<button ng-click="app.useLang('it')">IT</button>
<button ng-click="app.useLang('en')">EN</button>
</div>
</body>
</html>
try this
{{'variable_name' | translate }}
After going through the solutions provided in developer forums, finally I found the solution for my problem. Actually the reason behind my content going back to "english" from "italics" is "page refreshing". To stop the page from refreshing I need to set the <button> type as "button".
ie <button type="button">
Code change
<button type="button" ng-click="app.useLang('it')">IT</button>
<button type="button" ng-click="app.useLang('en')">EN</button>
I did the change in my code and it stopped the page from refreshing, which in turn gave my expected result.

Controller properties (like $scope.data) are working on page1.html, but not working on page2.html

I am new to Angular JS. I have 1 controller and 2 views. 1st view is supposed to be filled with user. when user filling the data I am storing those values using ng-model in controller(For $scope). After submission of the form, I want to use that data in 2nd page. But I am not getting anything. is there any rule like one controller should be specific to one view. Because when I try to display data on 1st pageI am getting correctly. But when I try the same code onpage2.html I am not getting any value and any error even though page is loaded. I searched a lot on SO. but could not find proper solution. I would be very thankful to U, if anyone of U helps me.Thanks a lot in advance
script.js
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.item="";
$scope.remarks="";
$scope.divCount=[{}];
$scope.addDiv=function(){
$scope.divCount.push({});
};
})
Page1.html
<html>
<head>
<title>My AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body
<form action="page2.html">
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="count in divCount">
Item : <textarea rows="4" cols="50" ng-model="item"> </textarea> <br><br/>
Remarks: <textarea ng-model="remarks" rows="2" cols="50"></textarea> <br><br/>
<div>
<button ng-click="addDiv();">Add Another Item</button>
</div>
</div>
</div>
<input type="submit" value="submit"/>
</form>
</body>
</html>
page2.html
<div ng-controller="myCtrl">
<div> item: {{item}} </div>
<div> remarks: {{remarks}}</div>
</div>
If you want use one controller in two page use ui-router .
You can see here for more infomation
https://github.com/angular-ui/ui-router/wiki
But i recommend you dont do that using a single controller for multiple views (pages, as you say) is a very poor design for an angular app
On click of submit button in Page1.html store the required data in a service/factory. Retrieve the data from the service/factory in page2.html

Setting Super Simple View Engine Sections in from nested master pages

I'm building a web application and am using Nancy and Super Simple view engine to render the content for the user. Since a lot of the pages have the same layout (headers, sidemenu, ect.), I have seperated reusable contents in a master page.
Currently I have
--Root_file (Master page)
--Home
--Products
--Contact
--Account (Master page)
--Overview
--Manage
--Post
All files under root_file have a #Master['root_file.html'] reference. All files under Account have a #Master['account.html'].
Now my problem is, for Manage under Account I want to set a js-script as an additional header. I figured, by referring to the tag in the top-level Master Page, I would be able to add the js through reference.
Here's an overview.
Root_file.html
<head>
<title>Nice little title.</title>
#Partial['PartialView/header_references.html']
#Section['Additional_headers'];
</head>
<body>
#Section['Content'];
</body>
account.html
#Master['root_file.html']
#Section['Content']
<div class="container">
<div class="row justify-content-center">
#Partial['PartialView/side_menu.html']
<div class="col p-3">
#Section['Inner_content'];
</div>
</div>
</div>
#EndSection
manage.html
#Master['account/overview.html']
#Section['Additional_headers']
<script src="../../../Content/scripts/file-upload.js"></script>
#EndSection
I was hoping that I could set #Section[Additional_headers] through the nested master page, but the result doesn't reflect my hope.
Am I doing something wrong, or isnt it possible to set sections like this?
This is an old question and I figured you got this answered elsewhere but perhaps someone else has the same issue.
I ended up wrapping the placeholders of the top master page with new ones in the subpage. It's anything but pretty but it gets the job done.
In your html page you reference
#Section['Additional_headers']
Instead you can reference this in your sub master page wrapped in a new placeholder like:
#Section['Additional_headers']
#Section['Sub_Additional_headers']
#EndSection
You can then reference this new section in any underlying html pages like this
#Section['Sub_Additional_headers']
<label>This is in a nested master page</label>
#EndSection
To reuse your example above it would look something like this
Root_file.html
<head>
<title>Nice little title.</title>
#Partial['PartialView/header_references.html']
#Section['Additional_headers'];
</head>
<body>
#Section['Content'];
</body>
account.html
#Master['root_file.html']
#Section['Additional_headers']
#Section['Sub_Additional_headers']
#EndSection
#Section['Content']
<div class="container">
<div class="row justify-content-center">
#Partial['PartialView/side_menu.html']
<div class="col p-3">
#Section['Inner_content'];
</div>
</div>
</div>
#EndSection
manage.html
#Master['account/overview.html']
#Section['Sub_Additional_headers']
<script src="../../../Content/scripts/file-upload.js"></script>
#EndSection

How to click on a link in div

Could any one please help me in clicking the link (Images1) under a div?
<div class="test1"><a class="k1">Images1</a></div>
<div class="test1"><a class="k1">Images2</a></div>
Note: Not working
var imagesLink = driver.FindElements(By.ClassName("k1"))[0];
imagesLink.Click();
I am getting an error:
{Error "Compound class names are not supported. Consider searching for one class name and filtering the results."}
First of all, if your page is in an iframe, you need to switch to the frame first.
Given the html from comment as below:
<html lang="en" xmlns="w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="hdtb" role="navigation">
<div id="hdtbSum">
<div id="hdtb_msb">
<div class="hdtb_mitem hdtb_msel"> </div>
<div class="hdtb_mitem"> <a class="q qs" href="yahoo.co.in">Yahoo</a> </div>
<div class="hdtb_mitem"><a class="q qs" href="gmail.com">Gmail</a></div>
<div class="hdtb_mitem"><a class="q qs" href="hotmail.com">Hotmail</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>
Multiple ways of finding the Gmail link:
driver.FindElement(By.CssSelector(".hdtb_mitem > a[href='gmail.com']")).Click();
// alternatives:
// driver.FindElements(By.CssSelector(".hdtb_mitem > a"))[1].Click();
driver.FindElement(By.XPath("//div[#class='hdtb_mitem']/a[#href='gmail.com']")).Click();
// alternatives:
// driver.FindElement(By.XPath("//div[#class='hdtb_mitem']/a[text()='Gmail']")).Click();
// driver.FindElements(By.XPath("//div[#class='hdtb_mitem']/a"))[1].Click();
// driver.FindElement(By.XPath("(//div[#class='hdtb_mitem']/a)[2]")).Click();
ANother XPath approach would be to search 'by text' as the contained text appears to be the only truly unique identifier (this is generally not ideal, but it appears you don't have control of the HTML in this case).
driver.FindElement(By.XPath("//div[#class='test1']/a[contains(text(), 'Images2')]")).Click();
IWebElement elment = driver.FindElement(By.PartialLinkText("Click"));
element.Click();

cakePHP why does my view not display properly

I was given a project to update a cakePHP website a few days ago and I'm having some issues. I've been reading through the cakePHP cookbook, but I don't understand why a page that I am creating from scratch does not display in a browser properly.
Here's what I have:
A default model 'contact.php'. And A view inside the directory /app/views/pages/ called contact.ctp with the code:
<h1 class="page-title left">Photo Tour</h1>
<div id='map'>
<img src="/img/map.png" alt"Map to Our Location"/>
<p> Hello</p>
</div>
<p>Hello</p>
When I go to the home page and click on the 'contact us' page link, the title bar changes to 'Contact Us' as it should, but nothing displays on the page itself.
Also, 'map' is defined as a div in the master.css file.
Any ideas why this is?
If your navbar and logo are displaying, then your layout page is working correctly, but your contact.ctp data may not be. Be sure that your layout.ctp file contains the following:
<?php echo $content_for_layout; ?>
In your case, it looks like your code should look something like this:
<html>
<body>
<header>
<div id="navbar">
<ul>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
<li>MenuItem</li>
</ul>
</div>
</header>
<section>
<?php echo $content_for_layout; ?>
</section>
<footer>Here is the footer information</footer>
</body>
</html>

Resources