Highcharts.AST.allowedAttributes

[Pascal76]

Hello,

How can I use Highcharts.AST.allowedAttributes with /usr/local/bin/highcharts-export-server (v4) please ?

I tryed using --customCode "AST.allowedAttributes.js"
but it does not work.

The file contains:
Highcharts.AST.allowedAttributes.push('border');
Highcharts.AST.allowedAttributes.push('align');
Highcharts.AST.allowedAttributes.push('bordercolor');
Highcharts.AST.allowedAttributes.push('zIndex');
Highcharts.AST.allowedAttributes.push('bgcolor');
Highcharts.AST.allowedAttributes.push('cellpadding');
Highcharts.AST.allowedAttributes.push('cellspacing');
Highcharts.AST.allowedTags.push('center');
Highcharts.AST.allowedAttributes.push('center');

On the Dockerfile:
WORKDIR /node-export-server
ADD ["AST.allowedAttributes.js","/node-export-server"]
RUN chown -R node /node-export-server &&
chmod 644 AST.allowedAttributes.js

The command line :
/bin/docker run -u 0:0 -v /apache_sites/jbm:/apache_sites/jbm --rm --tmpfs=/run highcharts_es timeout 10 /usr/local/bin/highcharts-export-server --allowCodeExecution true --infile /apache_sites/jbm/b.json --outfile /apache_sites/jbm/web/img/toto.png --resources '[]' --customCode AST.allowedAttributes.js --width 720 --height 320 --scale 1.2 --logLevel 4

[jszuminski]

Thanks for reporting @Pascal76!

Here's a sample showing how to use the customCode option:

node-export-server/tests/http/scenarios/allow_code_execution.json

Lines 1 to 23 in ced7b17

	{
	"options": {
	"title": {
	"text": "The default value of the 'allowCodeExecution' allows stringified resources"
	},
	"xAxis": {
	"categories": ["Jan", "Feb", "Mar", "Apr"]
	},
	"series": [
	{
	"type": "column",
	"data": [5, 6, 7, 8]
	},
	{
	"type": "line",
	"data": [1, 2, 3, 4]
	}
	]
	},
	"callback": "function callback(chart){chart.renderer.label('This label is added in the stringified callback.<br>Highcharts version '+Highcharts.version,75,75).attr({id:'renderer-callback-label',fill:'#90ed7d',padding:10,r:10,zIndex:10}).css({color:'black',width:'100px'}).add();}",
	"customCode": "Highcharts.setOptions({chart:{events:{render:function (){this.renderer.image('https://www.highcharts.com/samples/graphics/sun.png',75,50,20,20).add();}}}});",
	"resources": "{\"js\":\"Highcharts.charts[0].update({xAxis:{title:{text:'Title from the resources stringified object, js section'}}});\",\"css\":\".highcharts-yaxis .highcharts-axis-line{stroke-width:2px;stroke:#FF0000;}\"}"
	}

The customCode option accepts either stringified JavaScript code or the name of the .js file available locally.

You can take a look at the CLI examples as well:

node-export-server/tests/cli/scenarios/allow_code_execution_and_file_resources.json

Lines 1 to 8 in ced7b17

	{
	"instr": "{\"title\":{\"text\":\"Allow code execution and file resources\"},\"xAxis\":{\"categories\":[\"Jan\",\"Feb\",\"Mar\",\"Apr\"]},\"series\":[{\"type\":\"column\",\"data\":[5,6,7,8]},{\"type\":\"line\",\"data\":[1,2,3,4]}]}",
	"allowCodeExecution": true,
	"allowFileResources": true,
	"callback": "./samples/resources/callback.js",
	"customCode": "Highcharts.setOptions({chart:{events:{render:function (){this.renderer.image('https://www.highcharts.com/samples/graphics/sun.png',75,50,20,20).add();}}}});",
	"resources": "{\"js\":\"Highcharts.charts[0].update({xAxis:{title:{text:'Title from the resources object, js section'}}});\",\"css\":\".highcharts-yaxis .highcharts-axis-line{stroke-width:2px;stroke:#FF0000;}\",\"files\":[\"./samples/resources/resources_file_1.js\",\"./samples/resources/resources_file_2.js\"]}"
	}

Please try to follow this and let me know if it works for you. If not, please share the full log (--logLevel 4). Try to include a console.log statement in your customCode as well, it will help us determine whether your function runs or not.

[Pascal76]

Thank you !

It works except for the border attribute (?!) while my JS file contains :

Highcharts.AST.allowedTags.push('table');
Highcharts.AST.allowedTags.push('tr');
Highcharts.AST.allowedTags.push('td');
Highcharts.AST.allowedTags.push('center');
Highcharts.AST.allowedTags.push('class');
Highcharts.AST.allowedTags.push('style');
Highcharts.AST.allowedAttributes.push('border');
Highcharts.AST.allowedAttributes.push('align');
Highcharts.AST.allowedAttributes.push('bordercolor');
Highcharts.AST.allowedAttributes.push('zIndex');
Highcharts.AST.allowedAttributes.push('bgcolor');
Highcharts.AST.allowedAttributes.push('cellpadding');
Highcharts.AST.allowedAttributes.push('cellspacing');
Highcharts.AST.allowedAttributes.push('center');

What is not working :
'name' : 'outlook

',

When I remove border=0 then it works.

[jszuminski]

That is indeed strange.

Could you please share the SVG that you're sending? Is there a way for me to replicate this locally?

[Pascal76]

b.json
AST.allowedAttributes.js.txt

[Pascal76]

also if the json file contains comments like
// xx
then it breaks the generation of the image
( /* xx */ format is OK )

Wed Jun 05 2024 12:28:02 GMT+0200 [error] - [pool] In pool.postWork: Error encountered during export: 6.174512ms.
SyntaxError: Unexpected token ')'
new Function ()
at triggerExport (evaluate at setAsConfig (file:///node-export-server/lib/export.js:138:8), :68:6)
at #evaluate (file:///node-export-server/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/ExecutionContext.js:373:19)
at async ExecutionContext.evaluate (file:///node-export-server/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/ExecutionContext.js:268:16)
at async IsolatedWorld.evaluate (file:///node-export-server/node_modules/puppeteer-core/lib/esm/puppeteer/cdp/IsolatedWorld.js:96:16)
at async CdpFrame.evaluate (file:///node-export-server/node_modules/puppeteer-core/lib/esm/puppeteer/api/Frame.js:339:20)
at async CdpPage.evaluate (file:///node-export-server/node_modules/puppeteer-core/lib/esm/puppeteer/api/Page.js:796:20)
at async default (file:///node-export-server/lib/export.js:188:9)
at async postWork (file:///node-export-server/lib/pool.js:307:20)
at async doExport (file:///node-export-server/lib/chart.js:439:20)
at async Object.singleExport (file:///node-export-server/lib/chart.js:208:3)

[jszuminski]

@Pascal76 the JSON file cannot contain comments: https://stackoverflow.com/questions/244777/can-comments-be-used-in-json

If the provided JSON file is not proper, there will be an error (most likely) which would resemble the one that you've attached above.

Regarding the allowed tags & attributes, I will investigate why that happens.

[jszuminski]

Closing due to inactivity.

---

Summary:

• setting Highcharts AST attributes work: Highcharts.AST.allowedAttributes #533 (comment)
• JSON files cannot contain commens - this might cause errors

[Pascal76]

Hello @jszuminski
You closed this ticket... but did you check "Regarding the allowed tags & attributes, I will investigate why that happens." ?

[Pascal76]

I spoke about issue with border=0
Same issue with align="XXX"
Even when AST.allowedAttributes.js (loaded by 'customCode' : './AST.allowedAttributes.js') contains : Highcharts.AST.allowedAttributes.push('align');