Support Content-Security-Policy syntax highlighting

[mattes]

Content-Security-Policy is a great W3C standard to prevent XSS attacks. We would love to contribute the syntax highlighting for it.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

[mattes]

CLOUD9 CORPORATE CONTRIBUTOR LICENSE AGREEMENT should be signed.

[nightwing]

Hi, how are .csp files used, i could find .csp extension used only for Caché Server Page markup

[nightwing]

it would be better to group these into one regex or use a keywordMapper

[davidgatti]

@nightwing I'll explain my reasoning and you tell me if it is broken :) from the documentation I understood that the matching will stop once something is found, so there is no need traversing each rule. Thus less work for the editor. If I mush everything in one regex, won't that be more taxing for the IDE? If that is not the case I'll change it.

[nightwing]

Using one regexp is faster than using several, so highlighter combines all the rules in the state together

ace/lib/ace/tokenizer.js

Line 131 in 2d768f6

this.regExps[key] = new RegExp("(" + ruleRegExps.join(")|(") + ")|($)", flag);

.
Here it still needs to see which rule did match, and that adds some overhead.

[davidgatti]

OK, I understand. Thank you for the explanation.

[nightwing]

would be better to remove comment properties and just keep one url in a comment, instead of the comment on line 31

[davidgatti]

This is a bit unclear, you say to remove the comment property. That I get, I don't get what should I do with the URL? Because on line 31 o this file I have /* This file was autogenerated from (uuid: ) */. Should I just remove the comment section all-together?

[nightwing]

You can remove the /* This file was autogenerated from (uuid: ) */ comment and the one after it. And instead of them add // see https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/ comment.

[davidgatti]

I see. I thought that since some parts of the file are auto generated I should not touch those parts.

[mattes]

how are .csp files used
I don't think writing Content-Security-Policy to files is common. You still want to be able to edit with syntax highlighting though.

I will have a look at the other suggestions.

[nightwing]

How do you use the mode if the csp rules are not in a separate file?

[mattes]

Sorry, with files in my previous comment I meant writing files to disk. In the context of files here a file could look like this for example:

script-src 'strict-dynamic' 'nonce-rAnd0m123' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'none'; report-uri https://csp.example.com;

[nightwing]

How are you planning to use this mode? Do you use ace on a webpage where users can enter csp rules, and you set csp mode programmatically, or do you want this to use in an ide like cloud9?
I am asking because if i merge this pr, users will get this mode for files with .csp extension, which are not related to this mode.

[mattes]

Do you use ace on a webpage where users can enter csp rules, and you set csp mode programmatically.

This is what we are trying to achieve. Sounds like we are on the wrong path here?

[davidgatti]

@nightwing regarding the Mode situation. I think what we want to do is to highlight CSP keywords so developers can see if they did a typo or not when writing those rules in... well... any language. Is there a way to achieve this that is different from Mode?

Because when I visit this link: https://ace.c9.io/#nav=higlighter I see:

Creating a Syntax Highlighter for Ace, and bellow that Defining a Mode. This is the place where I learned about Mode.

[mattes]

We made some changes. Happy to rebase. Does this look good @nightwing ?

[nightwing]

I think what we want to do is to highlight CSP keywords so developers can see if they did a typo or not when writing those rules in... well... any language.

@davidgatti to do that we need some way of detecting that a string in another language is something that can be interpreted as csp. Otherwise user will get csp keywords highlighted in strings that are not related to csp at all.

[nightwing]

@mattes looks mostly good, i think only changes to ace/ext/modelist.js and package.json need to be reverted, but i can do that when merging.
I have not merged this yet, because first i want to make sure that this achieves what we want, because if the goal is to have highlighting in any mode, we may need to rethink the approach a bit.

[davidgatti]

@nightwing OK make sense. One thing that I can add is that the majority of those keywords are unique, the ones that might cause a problem is maybe 'self' for example.

Another thing worth knowing is that you set CSP on the back-end of a site, meaning the back end can be written in any language. This makes it tricky to decide which language to filter out.

The back-end must set the right headers, and to set the headers you need to do it in the back-end.

I hope this will help while contemplating this situation :)

[davidgatti]

@nightwing I removed the extension, so you don't have to :)

[mattes]

Thanks @nightwing for your help on this. The goal is to have Ace editor embedded on a website and have it highlight Content-Security-Policies.

To detect a Content-Security-Policy we could look for default-src, but it would be guessing and I don't think this would be reliable.

[nightwing]

i am afraid there is no way to add this to all modes, i've made some small changes to allow autocompleter to work for csp mode and merged the pr.

[davidgatti]

@nightwing Ok, so I see that you merged the PR, and so if I visit https://ace.c9.io/build/kitchen-sink.html what should I expect?

[nightwing]

the mode is hidden because it doesn't correspond to a file type, you can test it by running editor.setOption("mode", "ace/mode/csp") in the console.

[mattes]

Thanks everyone!