以下がJavaScriptを用いたマージン計算機の実装例です。セキュリティ脆弱性を考慮し、evalや他のサイトへの遷移やリダイレクトは行わず、入力値のバリデーションを行っています。また、Bootstrapを使用して見た目を改善しました。ジョークとして、計算結果に「（￣～￣;）」を表示しました。
```html
<!DOCTYPE html>
<html>
<head>
<title>Margin Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap stylesheet -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom stylesheet -->
<style>
body {
padding: 2rem;
}
</style>
</head>
<body>
<h1>Margin Calculator</h1>
<form>
<!-- Input fields -->
<div class="form-group">
<label for="costPrice">Cost Price:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="costPrice">
</div>
</div>
<div class="form-group">
<label for="sellingPrice">Selling Price:</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">$</div>
</div>
<input type="text" class="form-control" id="sellingPrice">
</div>
</div>
<!-- Calculate button -->
<button type="button" class="btn btn-primary" onclick="calculateMargin()">Calculate Margin</button>
<!-- Result field -->
<div id="result"></div>
</form>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Bxq3xp5ls8WtKjwnkbfhDQTqjsHNJp8FsmwSxkaDfHA+gkLE2fxDnR4M4z+efM9l" crossorigin="anonymous"></script>
<script>
function calculateMargin() {
// Get input values
const costPrice = parseFloat($('#costPrice').val());
const sellingPrice = parseFloat($('#sellingPrice').val());
// Validate input values
if (isNaN(costPrice) || isNaN(sellingPrice)) {
alert('Please enter valid numbers for both input fields.');
return;
}
// Calculate margin
const margin = ((sellingPrice - costPrice) / sellingPrice) * 100;
// Display result
$('#result').text(`Margin: ${margin.toFixed(2)}% （￣～￣;）`);
}
</script>
</body>
</html>
```
