Embedding Javascript and HTML into Kibana 5.x

Reading this post:

http://www.supermind.org/blog/1213/embed-custom-javascript-and-html-in-a-kibana-4-x-visualization

Kelvin makes a really good suggestion…. and very good inspiration. The suggestion works fine but in my case I needed it to go a step further – I needed to embed an iframe into Kibana. The iframe (and indeed any other <script> tag) was being filtered out by Angular’s sanitization protection. I needed to disable this and make sure that Angular trusts any inputted HTML and displays it as is. TO do this, we need to change the file kibana/src/core_plugins/markdown_vis/public/markdown_vis_controller.js to:

	import marked from 'marked';
	import uiModules from 'ui/modules';
	import 'angular-sanitize';

	marked.setOptions({
	gfm: true, // Github-flavored markdown
	sanitize: true // Sanitize HTML tags
	});


	const module = uiModules.get('kibana/markdown_vis', ['kibana']);
	module.controller('KbnMarkdownVisController', function ($scope, $sce) {
	$scope.$watch('vis.params.markdown', function (html) {
	if (!html) return;
	$scope.html = $sce.trustAsHtml(html);
	});
	});

view raw

markdown_vis_controller.js

hosted with ❤ by GitHub

Notes:

Line 12: we inject $sce into the controller
Line 15, we use the $sce.trustAsHTML function to avoid HTML sanitation

Obviously…. be very careful, this leaves you wide open to some nasty stuff like XSS, javascript attacks and so on…. make sure your kibana users are trusted

Share this:

Like this:

Related