Foundation 6 - Panini - #if production flag? - zurb-foundation

I'm creating a website using Foundation 6 (based on the Zurb template)
I want to use some HTML (namely, Google Analytics) that's meant to be added only if the gulp's production flag is set.
How can I accomplish that?

I have used gulp-string-replace to do things like this. I set a unique string in the HTML such as <!-- {{{GA_CODE}}} --> and have gulp replace the string if the production flag is set.
https://www.npmjs.com/package/gulp-string-replace
You could use this with something like gulp-if
https://github.com/robrich/gulp-if

Related

How do I teach WebStorm 9 inspector to recognize Angular Material Design tags/attributes?

Currently, all my angular material HTML attributes are highlighted in yellow with WebStorm 9 (Mac OS X Yosemite) warning: "Attribute [name] is not allowed here".
How can I teach WS to automatically recognize these attributes as valid? I am aware that I can add each one one-by-one to the list of custom attributes, but was hoping that there would be a better way to do this.
UPDATE:
Just wanted to clarify that this issue applies to Angular Material project, and not the AngularJS itself.
You need to add the angular-material.js file as a Library in WebStorm:
Open Preferences (Mac: Cmd+,, Win/Linux: Ctrl+Alt+S)
Go to Languages & Frameworks > JavaScript > Libraries
Click Add and then press the + icon
Find angular-material.js in your node_modules folder
Add a Name and a version and press Ok
Now you will have completions for all elements and attributes that have an #ngdoc documentation in the angular-material source code.
Usage
Start typing and you will see the completions:
Pressing F1 (Ctrl+Q on Win/Linux) will also show some docs, if available in the source code:
Important note
Not all features are properly documented, the following won't show up (unless you already used them) cause they are defined dynamically in a loop, with no #ngdoc for them:
var API_WITH_VALUES = [ "layout", "flex", "flex-order", "flex-offset", "layout-align" ];
var API_NO_VALUES = [ "show", "hide", "layout-padding", "layout-margin" ];
So for these you'd have to add them as a custom attribute (Alt+Enter > "Add flex to custom html attributes").
Environment
Tested on a Mac OS X 10.11.4 using WebStorm 2016.1.1, but this should work for older versions as well.
I am using PHPStorm, which is a sister Project of WebStorm, but it should work the same way.
You maybe need to add the Library:
File
Settings
Languages & Frameworks
Javascript
Librarys
Add here AngularJS
If this does not work, you can add them manually:
Follow this Steps:
File
Default Settings
Editor
Inspection
HTML
Unknown HTML tag attributes
To the right you will see in Options "Custom HTML tag attributes". Enter here the attributes you want to allow.
I highly recomend you to install the Angular.js plugin:
Go to menu File > Settings (or ctrl + alt + S if you're on Windows);
Select Plugins in the window that'll open;
Click in the Browse Repositories button;
Type AngularJS in the search field. Select the plugin;
Click Install Plugin.
The plugin is incumbed to read #ngdoc annotations present in ngMaterial sources and create documentation for their directives.
It seems to support WebStorm and other IDEs, but I could not find it in the plugin registry while filtering by other IDEs. Maybe it'll work inside WebStorm...
Anyway, this is what you get:
You have also a plugin that helps a lot, check it out. It helps a lot
Angular material v2, Teradata covalent v1, Angular flex layout v1 & Material icon live templates
And with the solution provided by #Alex Ilyaev gives a lot of help.
But its no perfect.
Hope it helps.
Currently I don't think that idea's AngularJS plugin understands angular-materials attribute extensions.
It does understand the directives i.e. control click <md-button ...> and the directive (custom tag) is found.
For now you will have to add the attributes af custom attributes in order to get a "green" page.

Upgrading Django from 1.4 to 1.5 -- url tag changed? [duplicate]

This question already has answers here:
Django release 1.5: 'url' requires a non-empty first argument. The syntax changed in Django 1.5
(6 answers)
Closed 8 years ago.
I upgraded my django project from 1.4 to 1.5 and now I'm getting the error that my url tags are formatted incorrectly. I did some research to find that, I believe, all my url tags are now in the wrong format.
In 1.4, my url tags looked like this: {% url path.to.view %}
In 1.5 the url tag must look like this: {% url 'path.to.view' %} (note the single quotes)
Am I reading this correctly? All url tags need single quotes around the path to the view? Isn't that a huge inconvenience since people upgrading will have to change every single url in their templates to add single quotes? Is there a quicker way to deal with this? I have a lot of templates (it's a large corporate web application).
Thanks
Yes, you are reading it correctly. The change is covered in the release notes
The change might be inconvenient, but it makes the url tag consistent with others, and allows you to use variables as well as strings as tag arguments. There was an option to use the new style tag in Django 1.3 and 1.4 to allow users to prepare for the change.

Is there any good reason to have Sitecore Media url's including tilde?

I could see blog post from 2011 recommending using "-" instead of "~".
What is the best practice to write media URL in Sitecore 6.5 on .NET 4.0/IIS7.5? Should I keep default /~/media/ or follow blog post advice using /-/media/ or while I am there, why not just use /media/?
I suspect the use of ~ is for legacy reasons. The current recommendation is to use -/media as you point out, but you could use whatever you wanted and it would work. The issue you have just using /media/ is if there is any other item with that as part of the name then it will trigger the media handler, rather than serving up your content for example.
For example, as request for /blah/blah/blah/-/media/images/logo.png will serve up the image correctly, /about/media/news/2013/12/20/sitecore.aspx should in fact serve up a page but will trigger the media handler and return a 404 just using /media/. So if you are going to use something else then make sure it is unique, you may need to enforce it since content editors can be a bit funny about remembering things like this.
Since you are currently using Sitecore 6.5 then I can assume you have existing content. Make sure you leave the existing ~/media trigger to allow your Rich Text fields to continue to work
If you update the Media.MediaLinkPrefix setting on a system that
already has some content in a database, Sitecore may not update the
values in all Rich Text Editor fields that contain values in the old
formats, including inline images and links to media items.
Sitecore Idiosyncrasies: Media URLs
I would probably go ahead and set Media.RequestExtension to an empty string so that image urls are served up with the correct media extension too.
I know this problem appear just when are you using .Net Framework 2.0
Please see next link .
If you run your website under .Net Framework 4.0 and IIS 7.5 you don't have this vulnerability.
Also this document explain a little bit about using of tilde.
Also you can check John West blog about /~/media
So the conclusion is use -/media for media files.
For projects using Sitecore 7.2, you may want to stick to using a tilde or apply the hot-fix mentioned in the following KB article.
https://kb.sitecore.net/articles/998758

How to insert custom Javascripts in Sitecore backend

Pretty simple, I need to insert a script in Sitecores (v. 6.4) backend - how do I do it?
It doesn't matter if the script is placed inside <head> or <body>, nor does it matter if I can only specify the src of a <script> tag or if I can insert an actual Javascript snippet (the latter is preferable though).
The script needs to be inserted in the HTML when a Content Editor window is opened.
It is not an installation of my own, nor do I develop anything for Sitecore (I do have admin access, however), so something along the lines of installing a plugin would be the best solution I reckon.
I've previously inserted the script in Sitecore 5.4, but not in a pretty way (editing XML files) and if a better solution could be found here too, that'd be pretty great.
Update using Jens Mikkelsens answer in Sitecore Xpress 6:
I tried placing the following in web.config:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" />
</everypage>
<htmleditor>
<script src="/test.js" language="javascript" />
</htmleditor>
</clientscripts>
Being a little bit overzealous (and wanting to make sure the test.js file can be found) I put a js.test in the following locations:
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\
inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\
inetpub\wwwroot\SitecoreWebsite\WebSite\
Content of the test.js:
alert("Test [PATH TOKEN]");
Where the path token is just the parent folder name, so I know which test.js was loaded, e.g. inetpub\wwwroot\SitecoreWebsite\WebSite\sitecore\shell\Applications\Content Manager\test.js holds:
alert("Test Content Manager");
When I try to log in using the default Xpress admin user one of three things happens (in all three cases the frontend loads without errors, but no script present. I have NOT been able to determine when the errors happen, the only thing I can say for sure is that no errors occur when the test.js has not been included in web.config):
Case 1:
The content editor loads as expected, but no script is loaded. This happens most of the time when the clientscript have been included.
Case 2 - Server Error:
Server Error in '/' Application.
Exception Details: System.ArgumentException: Empty strings are not allowed.
Parameter name: value
Stack Trace:
[ArgumentException: Empty strings are not allowed.
Parameter name: value]
Sitecore.Diagnostics.Assert.ArgumentNotNullOrEmpty(String argument, String argumentName) +241
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetEveryPageScripts() +410
Sitecore.Web.UI.HtmlControls.PageScriptManager.GetScripts() +702
Sitecore.Web.UI.HtmlControls.Page.OnInit(EventArgs e) +62
System.Web.UI.Control.InitRecursive(Control namingContainer) +143
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1477
Case 3 - Sitecore error:
A required license is missing
Most likely causes:
The resource you are trying to access requires the following license: Runtime.
I'm not sure whether or not Xpress simply doesn't support clientscripts, but even if it doesn't it is weird that some times the content editor loads.
Update after testing in Sitecore 5.4 full version:
It does indeed work to put a script tag inside the <clientscripts> section in web.config as Jens Mikkelsen answered. It is, however, neccessary to put it inside the subsection <everypage> to get it to appear on every single page in the backend, whereas <htmleditor> only works for the Telerik RadEditor popup window in Sitecore 5.4.
Update after testing in Sitecore 6 full version:
The same method as described for Sitecore 5.4 works for Sitecore 6 with the addition of little thing: <script> embedded in <clienscripts> now require a key attribute:
<clientscripts>
<everypage>
<script src="/test.js" language="javascript" key="test script" />
</everypage>
</clientscripts>
I don't think you will be able to add the script with out modifying a file. However you can take a look at the <clientscripts> section in the web.config. There you can add scripts to be loaded. However I don't know if it will only load in the content editor.
I have experimented with this before, and I ended up using the above setting, but as I remember it also loaded on the Page Editor and the Desktop.
Perhaps you can use this example code to add controls to the <head> on the front-end but instead alter it to use the <renderContentEditor> pipeline to somehow inject a new <script> tag into the editor.
here is a good example of it Injecting javascript and css to Sitecore Content Editor Page

Preventing XSS in Node.js / server side javascript

Any idea how one would go about preventing XSS attacks on a node.js app? Any libs out there that handle removing javascript in hrefs, onclick attributes,etc. from POSTed data?
I don't want to have to write a regex for all that :)
Any suggestions?
I've created a module that bundles the Caja HTML Sanitizer
npm install sanitizer
http://github.com/theSmaw/Caja-HTML-Sanitizer
https://www.npmjs.com/package/sanitizer
Any feedback appreciated.
One of the answers to Sanitize/Rewrite HTML on the Client Side suggests borrowing the whitelist-based HTML sanitizer in JS from Google Caja which, as far as I can tell from a quick scroll-through, implements an HTML SAX parser without relying on the browser's DOM.
Update: Also, keep in mind that the Caja sanitizer has apparently been given a full, professional security review while regexes are known for being very easy to typo in security-compromising ways.
Update 2017-09-24: There is also now DOMPurify. I haven't used it yet, but it looks like it meets or exceeds every point I look for:
Relies on functionality provided by the runtime environment wherever possible. (Important both for performance and to maximize security by relying on well-tested, mature implementations as much as possible.)
Relies on either a browser's DOM or jsdom for Node.JS.
Default configuration designed to strip as little as possible while still guaranteeing removal of javascript.
Supports HTML, MathML, and SVG
Falls back to Microsoft's proprietary, un-configurable toStaticHTML under IE8 and IE9.
Highly configurable, making it suitable for enforcing limitations on an input which can contain arbitrary HTML, such as a WYSIWYG or Markdown comment field. (In fact, it's the top of the pile here)
Supports the usual tag/attribute whitelisting/blacklisting and URL regex whitelisting
Has special options to sanitize further for certain common types of HTML template metacharacters.
They're serious about compatibility and reliability
Automated tests running on 16 different browsers as well as three diffferent major versions of Node.JS.
To ensure developers and CI hosts are all on the same page, lock files are published.
All usual techniques apply to node.js output as well, which means:
Blacklists will not work.
You're not supposed to filter input in order to protect HTML output. It will not work or will work by needlessly malforming the data.
You're supposed to HTML-escape text in HTML output.
I'm not sure if node.js comes with some built-in for this, but something like that should do the job:
function htmlEscape(text) {
return text.replace(/&/g, '&').
replace(/</g, '<'). // it's not neccessary to escape >
replace(/"/g, '"').
replace(/'/g, ''');
}
I recently discovered node-validator by chriso.
Example
get('/', function (req, res) {
//Sanitize user input
req.sanitize('textarea').xss(); // No longer supported
req.sanitize('foo').toBoolean();
});
XSS Function Deprecation
The XSS function is no longer available in this library.
https://github.com/chriso/validator.js#deprecations
You can also look at ESAPI. There is a javascript version of the library. It's pretty sturdy.
In newer versions of validator module you can use the following script to prevent XSS attack:
var validator = require('validator');
var escaped_string = validator.escape(someString);
Try out the npm module strip-js. It performs the following actions:
Sanitizes HTML
Removes script tags
Removes attributes such as "onclick", "onerror", etc. which contain JavaScript code
Removes "href" attributes which contain JavaScript code
https://www.npmjs.com/package/strip-js
Update 2021-04-16: xss is a module used to filter input from users to prevent XSS attacks.
Sanitize untrusted HTML (to prevent XSS) with a configuration specified by a Whitelist.
Visit https://www.npmjs.com/package/xss
Project Homepage: http://jsxss.com
You should try library npm "insane".
https://github.com/bevacqua/insane
I try in production, it works well. Size is very small (around ~3kb gzipped).
Sanitize html
Remove all attributes or tags who evaluate js
You can allow attributes or tags that you don't want sanitize
The documentation is very easy to read and understand.
https://github.com/bevacqua/insane