Using CSS elements in a Custom HTML widget.

I have a large-ish custom HTML widget which is basically just a long list of reference lists with some minimal formatting. I'd like to use a few things like bulleted lists and tables but the widget is inheriting a large amount of CSS elements from its parent pages. Is there a list of these CSS elements that are intended to be used in Custom HTML widgets? Of course, i used "view source" on the page containing the widget but the css content was overwhelmingly complex.

Find more posts tagged with

Accepted answers

All comments

zeek

Custom HTML widget doesn't show anything even with html code. Opened a case three days ago, no word from Solarwinds yet.

aLTeReGo

Does your HTML code contain script tags by chance?

zeek

I opened a new threat but not sure if it has been approved yet. Below is what I would like to display on the Custom HTML Widget.

<iframe width="450" height="260" style="border: 1px solid #cccccc;" src="">thingspeak.com/.../iframe>

zeek

thwack.solarwinds.com/.../custom-html-widget-not-working

aLTeReGo

I have confirmed this is not working in my lab environment also. I've logged this as a bug internally and am tracking it under CORE-17163

zeek

Sorry I'm new, how do I track the CORE-17163?

Chris-S

Thank you aLTeReGo... once it's working again do you have an idea of what simple css elements would already be active in a custom HTML widget?

aLTeReGo

That is an internal tracking ID. Support may be able to provide some insight into the status if you have an open case related to this issue. I included it here primarily so that other PMs and engineers, or support reps who may be following this thread, now or in the future, are aware that this issue is already tracked. It can also be used by other members of the community who open related support cases can accelerate the support process by making the support rep aware that this is a known issue.

zeek

Thank you.

aLTeReGo

As a general rule, script tags are not allowed. This means no javascript can be used within a Custom HTML resource due to the potential for security vulnerabilities this would allow.

tomiannelli

I used to have a JavaScript widget to create a grid of basically a world clock. I noticed when I went to port it over to the new platform it simply shows the HTML text. So if I understand you correctly aLTeReGo this code will no longer work.

if (hr >= 24){
hr = hr-24
day -= -1
}
if (hr < 0){
hr -= -24
day -= 1
}
if (hr < 10){
hr = " " + hr
}
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if (day <= 0){
if (month == 0){
month = 11
year -= 1
}
else{
month = month -1
}
day = monthDays[month]
}
if(day > monthDays[month]){
day = 1
if(month == 11){
month = 0
year -= -1
}
else{
month -= -1
}
}

//Changed the function of this region to get start and end DST
if (region == "NAmerica"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(2)
startDST.setHours(2)
startDST.setDate(1)
var dayDST = startDST.getDay()
if (dayDST != 0){
startDST.setDate(8-dayDST)
}
else{
startDST.setDate(1)
}

endDST.setMonth(10)
endDST.setHours(2)
endDST.setDate(1)
dayDST = endDST.getDay()
endDST.setDate(8-dayDST)
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST && currentTime < endDST){
dst = 1
}
}
if (region == "Europe"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(2)
startDST.setHours(1)
startDST.setDate(31)
var dayDST = startDST.getDay()
startDST.setDate(31-dayDST)
endDST.setMonth(9)
endDST.setHours(0)
endDST.setDate(31)
dayDST = endDST.getDay()
endDST.setDate(31-dayDST)
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST && currentTime < endDST){
dst = 1
}
}
if (region == "SAmerica"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(9)
startDST.setHours(0)
startDST.setDate(1)
var dayDST = startDST.getDay()
if (dayDST != 0){
startDST.setDate(22-dayDST)
}
else{
startDST.setDate(15)
}
endDST.setMonth(1)
endDST.setHours(11)
endDST.setDate(1)
dayDST = endDST.getDay()
if (dayDST != 0){
endDST.setDate(21-dayDST)
}
else{
endDST.setDate(14)
}
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST || currentTime < endDST){
dst = 1
}
}
if (region == "Cairo"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(3)
startDST.setHours(0)
startDST.setDate(30)
var dayDST = startDST.getDay()
if (dayDST < 5){
startDST.setDate(28-dayDST)
}
else {
startDST.setDate(35-dayDST)
}
endDST.setMonth(8)
endDST.setHours(11)
endDST.setDate(30)
dayDST = endDST.getDay()
if (dayDST < 4){
endDST.setDate(27-dayDST)
}
else{
endDST.setDate(34-dayDST)
}
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST && currentTime < endDST){
dst = 1
}
}
if (region == "Israel"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(3)
startDST.setHours(2)
startDST.setDate(1)
endDST.setMonth(8)
endDST.setHours(2)
endDST.setDate(25)
dayDST = endDST.getDay()
if (dayDST != 0){
endDST.setDate(32-dayDST)
}
else{
endDST.setDate(1)
endDST.setMonth(9)
}
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST && currentTime < endDST){
dst = 1
}
}
if (region == "Beirut"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(2)
startDST.setHours(0)
startDST.setDate(31)
var dayDST = startDST.getDay()
startDST.setDate(31-dayDST)
endDST.setMonth(9)
endDST.setHours(11)
endDST.setDate(31)
dayDST = endDST.getDay()
endDST.setDate(30-dayDST)
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST && currentTime < endDST){
dst = 1
}
}
if (region == "Baghdad"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(3)
startDST.setHours(3)
startDST.setDate(1)
endDST.setMonth(9)
endDST.setHours(3)
endDST.setDate(1)
dayDST = endDST.getDay()
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST && currentTime < endDST){
dst = 1
}
}
if (region == "Australia"){
var startDST = new Date()
var endDST = new Date()
startDST.setMonth(9)
startDST.setHours(2)
startDST.setDate(31)
var dayDST = startDST.getDay()
startDST.setDate(31-dayDST)
endDST.setMonth(2)
endDST.setHours(2)
endDST.setDate(31)
dayDST = endDST.getDay()
endDST.setDate(31-dayDST)
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
if(currentTime >= startDST || currentTime < endDST){
dst = 1
}
}
if (region == "NoDST"){
var currentTime = new Date()
currentTime.setMonth(month)
currentTime.setYear(year)
currentTime.setDate(day)
currentTime.setHours(hr)
}
// SET display_dst to 20 to put zone offset after the time
// SET display_dst to 10 to put DST after the time
// SET display_dst to 0 to hide DST after the time
var display_dst = 0
var dst_switch = dst+display_dst
switch (dst_switch) {
case 0:
return monthArray[month] + " " + day + ", " + year + " - " + hr + ":" + min + ":" + sec;
break;
case 1:
hr -= -1;
if (hr >= 24){ hr = hr-24; day -= -1;};
if (hr < 10){hr = " " + hr;};
if(day > monthDays[month]){day = 1; if(month == 11){month = 0;year -= -1;}else{month -= -1;}};
return monthArray[month] + " " + day + ", " + year + " - " + hr + ":" + min + ":" + sec;
break;
case 11:
hr -= -1;
if (hr >= 24){ hr = hr-24; day -= -1;};
if (hr < 10){hr = " " + hr;};
if(day > monthDays[month]){day = 1; if(month == 11){month = 0;year -= -1;}else{month -= -1;}};
return monthArray[month] + " " + day + ", " + year + " - " + hr + ":" + min + ":" + sec + " DST";
break;
case 21:
hr -= -1;
if (hr >= 24){ hr = hr-24; day -= -1;};
if (hr < 10){hr = " " + hr;};
if(day > monthDays[month]){day = 1; if(month == 11){month = 0;year -= -1;}else{month -= -1;}};
return monthArray[month] + " " + day + ", " + year + " - " + hr + ":" + min + ":" + sec + " (" + zonehours + ":" + zoneminutes + ")";
break;
default:
return monthArray[month] + " " + day + ", " + year + " - " + hr + ":" + min + ":" + sec;
break;
}
}

function worldClockZone(){
document.getElementById("Abu Dhabi").innerHTML = worldClock(3, "NoDST")
document.getElementById("Atlanta").innerHTML = worldClock(-5, "NAmerica")
document.getElementById("Austin").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Baton Rouge").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Boise").innerHTML = worldClock(-7, "NAmerica")
document.getElementById("Broomfield").innerHTML = worldClock(-7, "NAmerica")
document.getElementById("CedarRapids").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Chicago").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Denver").innerHTML = worldClock(-7, "NAmerica")
document.getElementById("Des Moines").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Eielson AFB, Fairbanks, Alaska").innerHTML = worldClock(-9, "NAmerica")
document.getElementById("Great Britain").innerHTML = worldClock(0, "Europe")
document.getElementById("Guam").innerHTML = worldClock(9, "NoDST")
document.getElementById("Hawaii").innerHTML = worldClock(-11, "NoDST")
document.getElementById("Iowa City").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Jackson").innerHTML = worldClock(-5, "NAmerica")
document.getElementById("Phoenix").innerHTML = worldClock(-7, "NoDST")
document.getElementById("Las Vegas").innerHTML = worldClock(-8, "NAmerica")
document.getElementById("Minneapolis").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Muscatine").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("New Orleans").innerHTML = worldClock(-6, "NAmerica")
document.getElementById("Salt Lake City").innerHTML = worldClock(-7, "NAmerica")
document.getElementById("UTC").innerHTML = worldClock(0, "Greenwich")
document.getElementById("West Palm Beach").innerHTML = worldClock(-5, "NAmerica")
setTimeout("worldClockZone()", 1000)
}
window.onload=worldClockZone;

//-->
</script>

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 3px;
background-color: #39804d;
padding: 3px;
}

.grid-container > div:nth-child(even) {
background-color: #ffffff;
text-align: center;
padding: 3px 0;
}
.grid-container > div:nth-child(odd) {
background-color: #f4fff4;
text-align: center;
padding: 3px 0;
}

</style>
<div class="grid-container">
<div style="Background-color:#39804d ;color:white;">OFFICE</div>
<div style="Background-color:#39804d ;color:white;">Date and Time</div>
<div style="Background-color:#39804d ;color:white;">OFFICE</div>
<div style="Background-color:#39804d ;color:white;">Date and Time</div>
<div>United Arab Emirates - Abu Dhabi</div><div><span id="Abu Dhabi"></span></div>
<div>Atlanta</div><div><span id="Atlanta"></div>
<div>Austin</div><div><span id="Austin"></div>
<div>Baton Rouge</div><div><span id="Baton Rouge"></span></div>
<div>Boise</div><div><span id="Boise"></span></div>
<div>Broomfield</div><div><span id="Broomfield"></span></div>
<div>Cedar Rapids</div><div><span id="CedarRapids"></span></div>
<div>Chicago</div><div><span id="Chicago"></span></div>
<div>Denver</div><div><span id="Denver"></span></div>
<div>Des Moines</div><div><span id="Des Moines"></span></div>
<div>Eielson AFB, Fairbanks, Alaska</div><div><span id="Eielson AFB, Fairbanks, Alaska"></span></div>
<div>Great Britain</div><div><span id="Great Britain"></span></div>
<div>Guam</div><div><span id="Guam"></span></div>
<div>Hawaii</div><div><span id="Hawaii"></span></div>
<div>Iowa City</div><div><span id="Iowa City"></span></div>
<div>Jackson, MI</div><div><span id="Jackson"></span></div>
<div>Las Vegas</div><div><span id="Las Vegas"></span></div>
<div>Minneapolis</div><div><span id="Minneapolis"></span></div>
<div>Muscatine</div><div><span id="Muscatine"></span></div>
<div>New Orleans</div><div><span id="New Orleans"></span></div>
<div>Phoenix</div><div><span id="Phoenix"></span></div>
<div>Salt Lake City</div><div><span id="Salt Lake City"></span></div>
<div>UTC</div><div><span id="UTC"></span></div>
<div>West Palm Beach</div><div><span id="West Palm Beach"></span></div>
</div>

aLTeReGo

Update for those of you tracking this issue yourself or have a case open that is referencing CORE-17163.

I confirmed with engineering that this was an intentional change introduced in the 2020.2.5 release to address a potential security vulnerability. Essentially, this is a simple matter of trust and how much you trust whomever is hosting the site you are embedding as an iFrame into your Orion dashboards. This is not a vulnerability specific to Orion, but really just iFrames in general.

Who is affected? Theoretically, anyone who already using a Custom WIdget containing an iFrame should be unaffected when they upgrade. Only when a new Custom HTML widget is added to a page should these new security restrictions take effect.

How do I restore the previous functionality in the Custom HTML resource that I was afforded prior to upgrading to 2020.2.5 or later?

Provided you assume, understand, and accept the risks associated with embedding iFrames into your Orion dashboards, restoring this functionality to its prior functional state is actually fairly simple. All you have to do is open Database Manager or SQL Studio and execute the following query. Note that you will need to replace 'DATABASENAME' with the name of your Orion database.

Update [DATABASENAME].[dbo].[WebSettings]
  SET [SettingValue] = 'False'
  Where [SettingName] = 'HTMLResourceSanitizationEnabled'

Once executed, the iFrames in your Custom HTML resources should begin working after refreshing the page. No need to reboot or restart services.

To re-enable the security protections again, simply run the following SQL query.

Update [DATABASENAME].[dbo].[WebSettings]
  SET [SettingValue] = 'True'
  Where [SettingName] = 'HTMLResourceSanitizationEnabled'