Lombiq Helpful Extensions, HTML script sanitizer - This week in Orchard (30/05/2020)

Gábor Domonkos's avatar
Announcement, Documentation, This week in Orchard

Have you ever had a hard time implementing the migration files of your content types that you have constructed using the admin UI? Let us show you the Code Generation Helpful Extensions that generate the C# code for you in a click from the admin UI! This week we are also showing you a new and useful feature of Orchard Core about how to sanitize your HTML in an easy way!

Orchard Core updates

HTML script sanitizer

By default, every content part should prevent input from rendering <script> tags. This should be opt-in on a per-type part level. This means that even if a part editor permits it, the rendering would filter these out. We can provide a reusable service as many parts will need it. And here we go! The name of the service is HtmlSanitizerService that is responsible for sanitizing the HTML code.

The implementation of the IHtmlSanitizerService interface

To do that we are using a new open-source NuGet that can be found in GitHub called HtmlSanitizer. HtmlSanitizer is a .NET library for cleaning HTML fragments and documents from constructs that can lead to XSS attacks. It uses AngleSharp to parse, manipulate, and render HTML and CSS.

As you can see in the code, there is a new class called HtmlSanitizerOptions that you can use to configure the sanitizer. If you checked the Usage section of the README.md file on the GitHub page of HtmlSanitizer you could see several lists that contain the tags allowed by default, the attributes allowed by default, CSS properties allowed by default, and so on. If you navigate to the HtmlSanitizerTests file and check the ShouldConfigureSanitizer method, you could see how to use the HtmlSanitizerOptions to set up your sanitizer by for example adding additional allowed attributes to it. In the 34th line, we are adding the class as an allowed attribute. And the Sanitize method of this service (you will never guess!) is responsible for sanitizing the HTML.

An example about how to use the HtmlSanitizerOptions

OK, that's cool but where and how can I use this feature in my Orchard Core site? If you have a HtmlBody Part, an HTML Field, or a Markdown Field you will find a new option in the editor of the field or the part with a new checkbox: Sanitize Html. This checkbox is enabled everywhere by default, but of course, you have the availability to disable this feature.

Setting the sanitize Html option in the editor of the HtmlBody Part

Let's say you have a site installed with the Blog recipe and you would like to create a new Article and do some evil stuff in the HtmlBody Part. You view the HTML source and enter the line there <a href=\"javascript: alert('xss')\">Click me</a>

Then hit Publish and view the HTML source again. You will notice that the code changed to <a>Click me</a>.

Injecting a script in a HtmlBody Part

Preview feed moved to Cloudsmith

For Orchard Core, the community has switched the preview feed package repository to Cloudsmith due to much nicer retention and bandwidth policies for open source projects. It means now you can use a different feed when using the nightly build packages of Orchard Core. If you open the documentation and select the Configure Preview package source in the Getting started section you will find the new feed URL and the way about how to set it up using Visual Studio or using the NuGet.config file.

The OrchardCore.Application.Cms.Targets package in Cloudsmith

Templates content items

If you remember, we had the Layout Template in Orchard 1, where you could define a layout page and save it as a template to start new pages out of this template. The idea would be to make it for any content item that you could store as a template and then create items that are just clones of that. In GitHub there is a feature called issue templates: when you create a new issue, you have templates for different types of issues. To see a good example of this idea navigate to the GitHub repository of ASP.NET Core and start to fill a new issue. Here GitHub will ask you what kind of issue you would like to create. These are the issue templates.

A sample for issue templates in GitHub

What about creating a content item and saving it as a template? The same way you have a Publish or Save as draft, you can say: Save as a template. And then it would be a content item of the specific type that might appear in the menu somewhere or might appear in the New button when you create a new content item based on the given type. When you create a new of this thing, it will just clone it and you start with a new content item that is based on that. If you have like articles with the specific background or specific text that you want to reuse you can do that. Same thing for a content type with a Flow Part attached. In this case, you can reuse the widgets too! What do you think about this idea? Do you like it? Or do you have any other thoughts about this feature? Leave your reply in the comments section below and let us know!

Demos

Code Generation Helpful Extensions in Lombiq Helpful Extensions for Orchard Core

If you navigate to the GitHub page of the Lombiq Helpful Extensions for Orchard Core, you will find a module that contains some handy extensions that you can use in your Orchard Core solution. Note that if you are using the nightly builds of Orchard Core, you should checkout to the orchard-core-preview branch, otherwise clone the dev branch of the repository.

To use this module place the content of it to your solution and if you are using Visual Studio use the Solution Explorer and add this module as an existing project to your solution. Don't forget to add this as a project reference to your ASP.NET Core Web Application. This is the way how you could add any external module or theme to your Orchard Core solution. Now if everything goes well, you can build your solution and install your Orchard Core site! Note that if you are using the nightly builds, you may need to add the preview package source as described here.

Set up your application using the Agency recipe. Go to Configuration -> Features and enable the Code Generation Helpful Extensions - Lombiq Helpful Extensions module. Now head to the content definition of the Landing Page (Content -> Content Definition -> Content Types -> Landing Page) and hit the Toggle showing generated migration code button.

The generated migration code of the Landing Page content type using the Code Generation Helpful Extensions

Here you could see the power of this extension. This module is about generating migration code from content definitions. You can use this to create (or edit) a content type on the admin and then move its creation to a migration class. Generated migration code is displayed under the content types' editors. If you are interested in the full demo, don't forget to check out the recording on YouTube!

News from the community

New websites using Orchard Core

https://saintsrow.com is the website where you can get information and order the different Saints Row games. And if you visit https://chorusthegame.com, you will find everything about an upcoming game called Chorus.

The homepage of Saints Row

If you are interested in more websites using Orchard and Orchard Core, don't forget to visit Show Orchard. Show Orchard is a website for showing representative Orchard CMS (and now Orchard Core) websites all around the internet. It was started by Ryan Drew Burnett, but since he doesn't work with Orchard anymore, as announced earlier it is now maintained by our team at Lombiq Technologies.

Orchard Core workshops

The contributors of Orchard Core will hold some unique online workshops in the coming months, between May and September 2020. So even with Orchard Harvest postponed due to the coronavirus pandemic we'll get some new learning events.

Lombiq's developers will also give two workshops, on using Orchard from the admin UI and on developing a module.

Are you looking to get up to speed with Orchard? Check out the workshops' details on the Orchard Core homepage!

Orchard Dojo Newsletter

Now we have 145 subscribers of the Lombiq's Orchard Dojo Newsletter! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post published to Orchard Dojo, including This week in Orchard of course.

Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!

If you are interested in more news around Orchard and the details of the topics above, don't forget to check out the recording of this week's Orchard meeting!

2 Comments

  • Matt said Reply

    I like the idea of the template feature. We would use the feature to setup templates for clients then only give them permissions to the templates.

    • Gábor Domonkos said Reply

      Yes, that would be a useful scenario to work with. However, you can also do something similar by setting different default values to fields, but yes, the template feature will be more than that.

Add a Comment