Apex Code Development You need to sign in to do that
Don't have an account?
Visualforce page "Not Secure" in preview.
Today I built this pretty basic stopwatch visualforce page. I made it in a dev org and then once I was finished, I wanted to put it into a sandbox for a clients org. The code ran perfectly fine in my dev org, but when I put it in the sandbox, i went to preview it and the page went blank and the URL was "Not secure". Why am I getting this? How can I get around "unsecure" script? Does this page just not work in sandboxes?
here is my code:
Visualforce Page:
<apex:page lightningStylesheets="false">
<html>
<head>
<title>Timecard Stopwatch</title>
<apex:slds />
<meta name="viewport" content="width=device-width"/>
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
</head>
<body style="background-color:white;">
<script type="text/jsx">
var StopWatch = React.createClass({
getInitialState: function() {
return {
isStart: false,
elapsed: 0,
diff: 0,
laps: [],
};
},
componentWillUnmount: function() { // clear timer
clearInterval(this.state.timer);
this.setState({timer: undefined});
},
tick: function() {
var elapsed = Date.now() - this.state.start + this.state.diff;
this.setState({elapsed: elapsed});
},
getTimeSpan: function(elapsed) { // 754567(ms) -> "12:34.567"
var m = String(Math.floor(elapsed/1000/60)+100).substring(1);
var s = String(Math.floor((elapsed%(1000*60))/1000)+100).substring(1);
var ms = String(elapsed % 1000 + 1000).substring(1);
return m+":"+s+"."+ms;
},
onClick: function() {
if(!this.state.isStart) { // start
var timer = setInterval(this.tick, 33);
this.setState({
isStart: true,
timer: timer,
start: new Date(),
});
} else { // pause
clearInterval(this.state.timer);
this.setState({
timer: undefined,
isStart: false,
diff: this.state.elapsed,
});
}
},
setLap: function() {
var lapElapsed = this.state.laps.length ? this.state.laps[0].elapsed : 0;
var lapTitle = "Lap"+(this.state.laps.length+1);
var lapTime = lapTitle+": "+this.getTimeSpan(this.state.elapsed - lapElapsed)
var lapElem = { label: lapTime, elapsed: this.state.elapsed };
this.setState({laps: [lapElem].concat(this.state.laps)});
},
reset: function() {
clearInterval(this.state.timer);
this.setState({
timer: undefined,
isStart: false,
elapsed: 0,
diff: 0,
laps: [],
});
},
render: function() {
return (
<div class="slds-scope">
<h1>{this.getTimeSpan(this.state.elapsed)}</h1>
<button onClick={this.onClick} style={style.button}>
{this.state.isStart ? "pause" : "start"}
</button>
<button onClick={this.setLap} style={style.button}>lap</button>
<button onClick={this.reset} style={style.button}>reset</button>
<ul style={style.lap}>
{this.state.laps.map(function(lap) {
return <li key={lap.id}>{lap.label}</li>;
})}
</ul>
</div>
);
}
});
var style = {
button: {
fontSize: 15,
height: 40,
width: 60,
margin: 10,
background: "#F7941D",
border: "3px",
},
lap: {
fontSize: 20,
padding: 10,
listStyleType: 'circle',
},
};
React.render( <StopWatch />, document.body );
</script>
</body>
</html>
</apex:page>
here is my code:
Visualforce Page:
<apex:page lightningStylesheets="false">
<html>
<head>
<title>Timecard Stopwatch</title>
<apex:slds />
<meta name="viewport" content="width=device-width"/>
<script src="http://fb.me/react-0.13.1.js"></script>
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
</head>
<body style="background-color:white;">
<script type="text/jsx">
var StopWatch = React.createClass({
getInitialState: function() {
return {
isStart: false,
elapsed: 0,
diff: 0,
laps: [],
};
},
componentWillUnmount: function() { // clear timer
clearInterval(this.state.timer);
this.setState({timer: undefined});
},
tick: function() {
var elapsed = Date.now() - this.state.start + this.state.diff;
this.setState({elapsed: elapsed});
},
getTimeSpan: function(elapsed) { // 754567(ms) -> "12:34.567"
var m = String(Math.floor(elapsed/1000/60)+100).substring(1);
var s = String(Math.floor((elapsed%(1000*60))/1000)+100).substring(1);
var ms = String(elapsed % 1000 + 1000).substring(1);
return m+":"+s+"."+ms;
},
onClick: function() {
if(!this.state.isStart) { // start
var timer = setInterval(this.tick, 33);
this.setState({
isStart: true,
timer: timer,
start: new Date(),
});
} else { // pause
clearInterval(this.state.timer);
this.setState({
timer: undefined,
isStart: false,
diff: this.state.elapsed,
});
}
},
setLap: function() {
var lapElapsed = this.state.laps.length ? this.state.laps[0].elapsed : 0;
var lapTitle = "Lap"+(this.state.laps.length+1);
var lapTime = lapTitle+": "+this.getTimeSpan(this.state.elapsed - lapElapsed)
var lapElem = { label: lapTime, elapsed: this.state.elapsed };
this.setState({laps: [lapElem].concat(this.state.laps)});
},
reset: function() {
clearInterval(this.state.timer);
this.setState({
timer: undefined,
isStart: false,
elapsed: 0,
diff: 0,
laps: [],
});
},
render: function() {
return (
<div class="slds-scope">
<h1>{this.getTimeSpan(this.state.elapsed)}</h1>
<button onClick={this.onClick} style={style.button}>
{this.state.isStart ? "pause" : "start"}
</button>
<button onClick={this.setLap} style={style.button}>lap</button>
<button onClick={this.reset} style={style.button}>reset</button>
<ul style={style.lap}>
{this.state.laps.map(function(lap) {
return <li key={lap.id}>{lap.label}</li>;
})}
</ul>
</div>
);
}
});
var style = {
button: {
fontSize: 15,
height: 40,
width: 60,
margin: 10,
background: "#F7941D",
border: "3px",
},
lap: {
fontSize: 20,
padding: 10,
listStyleType: 'circle',
},
};
React.render( <StopWatch />, document.body );
</script>
</body>
</html>
</apex:page>
http://fb.me/react-0.13.1.js
http://fb.me/JSXTransformer-0.13.1.js
from a non-HTTPS endpoint. All the pages within Salesforce are on HTTPS and the moment your page downloads or uses Scripts from a non-secure endpoint, the browser will explicitly turn OFF the security.
To fix this you need to do refer the HTTPS path for those script files - Alternatively you can also upload them as Static Resources and refer them.
All Answers
<script src="http2://fb.me/react-0.13.1.js"></script>
<script src="http2://fb.me/JSXTransformer-0.13.1.js"></script>
OR
MOve them into the static resource
http://fb.me/react-0.13.1.js
http://fb.me/JSXTransformer-0.13.1.js
from a non-HTTPS endpoint. All the pages within Salesforce are on HTTPS and the moment your page downloads or uses Scripts from a non-secure endpoint, the browser will explicitly turn OFF the security.
To fix this you need to do refer the HTTPS path for those script files - Alternatively you can also upload them as Static Resources and refer them.